[v4] Question about a little complicated configuration

[LevineLighto]

Since Tailwind decided to move the config into CSS file, is there a way to do this ...

export const Spacings = [
    ".25rem",   // 4px  | 1
    ".5rem",    // 8px  | 2
    ".625rem",  // 10px | 3
    ".75rem",   // 12px | 4
    ".875rem",  // 14px | 5
    "1rem",     // 16px | 6
    "1.25rem",  // 20px | 7
    "1.5rem",   // 24px | 8
    "1.75rem",  // 28px | 9
    "2rem",     // 32px | 10
]

export const PaddingSetup = () => {
    const output = {}

    Spacings.forEach((spacing, index) => {
        const number = index + 1;
        output[`borderless-${number}`] = spacing
        output[`bordered-${number}`] = `calc(${spacing} - 1px)`
    })

    return output
}

// ... Gap and margin setups

... in CSS way other than doing this?

@theme {
  --spacing-borderless-1: .25rem
  --spacing-bordered-1: calc(.25rem - 1px)
  // ...
}

Cause it will be a massive pain to maintain it.
Or do I need to return back to CSS preprocessors to do this?

[wongjn]

You could have a script that generates the equivalent v4 CSS configuration as a CSS file and then @import that CSS file. However, I don't think there's a way to do this "looping" in the CSS file itself.

[kerryj89]

Seems like a perfect case for Sass which works pretty well with most bundlers.

https://sass-lang.com/playground/#eJyVktuOgjAQhu95iglromRFbT2xcuOrsNisTaAQKBtd5d13aKdQs1dLQuj0m/+fQ2Bs1tZZLtVXe4JFAPiEK75vRBku8bxew66+ATyBERvRwBLLOLHDKETGNgifsCV29D0ZN2xHLDn6up1he8vYWM6wg2EHYiu/Hrf1jo759bj1TBzz6/HEsA/L+Eu9re2TbYIoDQK3qfg7a2Sm9LAxCD+r5iKaQrQt6igSlxAGxbmUN6mg07KQWv6Ixaxuqlo0+h6rrBRLcLEULQbON4IHdjPLq07pE2xSDM4iy69j+h3Q1dOa/Elhv/AOLDX3JCZ7o3WlSIk5eaW0UPpvi5S6JNup6Xtk7ftgeHscV19FKYzlWaq86C7Cm31O65ujg/vnpmM8Dd+1GMO/GqEx4vjt8SrrhxsSmrOR9ifwEvsU/qvOsyJf+BYQA6tvkXHCXfwCojb2lA==

$spacings: (
    ".25rem",   // 4px  | 1
    ".5rem",    // 8px  | 2
    ".625rem",  // 10px | 3
    ".75rem",   // 12px | 4
    ".875rem",  // 14px | 5
    "1rem",     // 16px | 6
    "1.25rem",  // 20px | 7
    "1.5rem",   // 24px | 8
    "1.75rem",  // 28px | 9
    "2rem",     // 32px | 10
);

$spacing-variants: ( "borderless", "bordered" );

@mixin utilitize($property-name, $properties, $variants) {
  $count: 0;
  @each $property in $properties {
    $count: $count + 1;
    @each $variant in $variants {
      @content($property-name, $variant, $count, $property);
    }
  }
}

@theme {
  @include utilitize('spacing', $spacings, $spacing-variants) using ($property-name, $variant, $count, $property) {
    --#{$property-name}-#{$variant}-#{$count}: #{$property}; 
    --#{$property-name}-#{$variant}-#{$count}: calc(#{$property} - 1px); 
  }
}

This will yield

@theme {
  --spacing-borderless-1: .25rem;
  --spacing-borderless-1: calc(.25rem - 1px);
  --spacing-bordered-1: .25rem;
  --spacing-bordered-1: calc(.25rem - 1px);
  --spacing-borderless-2: .5rem;
  --spacing-borderless-2: calc(.5rem - 1px);
  --spacing-bordered-2: .5rem;
  --spacing-bordered-2: calc(.5rem - 1px);
  --spacing-borderless-3: .625rem;
  --spacing-borderless-3: calc(.625rem - 1px);
  --spacing-bordered-3: .625rem;
  --spacing-bordered-3: calc(.625rem - 1px);
  --spacing-borderless-4: .75rem;
  --spacing-borderless-4: calc(.75rem - 1px);
  --spacing-bordered-4: .75rem;
  --spacing-bordered-4: calc(.75rem - 1px);
  --spacing-borderless-5: .875rem;
  --spacing-borderless-5: calc(.875rem - 1px);
  --spacing-bordered-5: .875rem;
  --spacing-bordered-5: calc(.875rem - 1px);
  --spacing-borderless-6: 1rem;
  --spacing-borderless-6: calc(1rem - 1px);
  --spacing-bordered-6: 1rem;
  --spacing-bordered-6: calc(1rem - 1px);
  --spacing-borderless-7: 1.25rem;
  --spacing-borderless-7: calc(1.25rem - 1px);
  --spacing-bordered-7: 1.25rem;
  --spacing-bordered-7: calc(1.25rem - 1px);
  --spacing-borderless-8: 1.5rem;
  --spacing-borderless-8: calc(1.5rem - 1px);
  --spacing-bordered-8: 1.5rem;
  --spacing-bordered-8: calc(1.5rem - 1px);
  --spacing-borderless-9: 1.75rem;
  --spacing-borderless-9: calc(1.75rem - 1px);
  --spacing-bordered-9: 1.75rem;
  --spacing-bordered-9: calc(1.75rem - 1px);
  --spacing-borderless-10: 2rem;
  --spacing-borderless-10: calc(2rem - 1px);
  --spacing-bordered-10: 2rem;
  --spacing-bordered-10: calc(2rem - 1px);
}

Then you can import that into your css file.