Utility classes are not being generated

[hollandThomas]

Hey, thanks for this plugin :)

With the current versions of tailwindcss and tailwind-utopia installed

{
  "dependencies": {
    "tailwind-utopia": "github:cwsdigital/tailwind-utopia#v1.0.5",
    "tailwindcss": "^3.0.24"
  }
}

and using the default configuration in tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  content: [],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require('tailwind-utopia')],
};

when running the tailwind jit compiler, all the necessary custom properties seem to be set on :root but adding utilities like ml-l does not seem to have any effect. There is no .ml-l { /* ... */ } added to the generated tailwind.css. The defaults such as ml-4 do work. Any idea why that might be?

:root {
  --text-size-step--2: calc( ((14.583333333333334 / 16) * 1rem) + (15.36 - 14.583333333333334) * var(--fluid-bp) );
  --text-size-step--1: calc( ((17.5 / 16) * 1rem) + (19.2 - 17.5) * var(--fluid-bp) );
  --text-size-step-0: calc( ((21 / 16) * 1rem) + (24 - 21) * var(--fluid-bp) );
  --text-size-step-1: calc( ((25.2 / 16) * 1rem) + (30 - 25.2) * var(--fluid-bp) );
  --text-size-step-2: calc( ((30.24 / 16) * 1rem) + (37.5 - 30.24) * var(--fluid-bp) );
  --text-size-step-3: calc( ((36.288 / 16) * 1rem) + (46.875 - 36.288) * var(--fluid-bp) );
  --text-size-step-4: calc( ((43.5456 / 16) * 1rem) + (58.59375 - 43.5456) * var(--fluid-bp) );
  --text-size-step-5: calc( ((52.254719999999985 / 16) * 1rem) + (73.2421875 - 52.254719999999985) * var(--fluid-bp) );
  --fs-3xs: calc( 0.328125rem + (6 - 5.25) * var(--fluid-bp) );
  --fs-2xs: calc( 0.65625rem + (12 - 10.5) * var(--fluid-bp) );
  --fs-xs: calc( 0.984375rem + (18 - 15.75) * var(--fluid-bp) );
  --fs-s: calc( 1.3125rem + (24 - 21) * var(--fluid-bp) );
  --fs-m: calc( 1.96875rem + (36 - 31.5) * var(--fluid-bp) );
  --fs-l: calc( 2.625rem + (48 - 42) * var(--fluid-bp) );
  --fs-xl: calc( 3.9375rem + (72 - 63) * var(--fluid-bp) );
  --fs-2xl: calc( 5.25rem + (96 - 84) * var(--fluid-bp) );
  --fs-3xl: calc( 7.875rem + (144 - 126) * var(--fluid-bp) );
  --fs-3xs-2xs: calc( 0.328125rem + (12 - 5.25) * var(--fluid-bp) );
  --fs-2xs-xs: calc( 0.65625rem + (18 - 10.5) * var(--fluid-bp) );
  --fs-xs-s: calc( 0.984375rem + (24 - 15.75) * var(--fluid-bp) );
  --fs-s-m: calc( 1.3125rem + (36 - 21) * var(--fluid-bp) );
  --fs-m-l: calc( 1.96875rem + (48 - 31.5) * var(--fluid-bp) );
  --fs-l-xl: calc( 2.625rem + (72 - 42) * var(--fluid-bp) );
  --fs-xl-2xl: calc( 3.9375rem + (96 - 63) * var(--fluid-bp) );
  --fs-2xl-3xl: calc( 5.25rem + (144 - 84) * var(--fluid-bp) );
}

.ml-4 {
  margin-left: 1rem;
}

[domchristie]

I think this might be because addUtilities is used rather than matchUtilities. I mocked up a quick plugin based on textSizes.js and the following format works:

matchUtilities(
  { [`${prefix}text`]: (value) => ({ fontSize: value }) },
  {
    values: {
      'step--2': 'clamp(0.9114583333333334rem, 0.939344512195122rem + -0.13943089430894323vw, 0.84rem)',
      'step--1': 'clamp(1.09375rem, 1.1108231707317073rem + -0.0853658536585365vw, 1.05rem)',
      'step-0': 'clamp(1.3125rem, 1.2393292682926829rem + 0.3658536585365854vw, 1.5rem)',
      'step-1': 'clamp(1.575rem, 1.549390243902439rem + 0.12804878048780496vw, 1.640625rem)',
      'step-2': 'clamp(1.89rem, 1.8272560975609755rem + 0.3137195121951221vw, 2.05078125rem)',
      'step-3': 'clamp(2.268rem, 2.1526920731707313rem + 0.5765396341463419vw, 2.5634765625rem)',
      'step-4': 'clamp(2.7216rem, 2.533211432926829rem + 0.9419428353658537vw, 3.204345703125rem)',
      'step-5': 'clamp(3.265919999999999rem, 2.977329900914633rem + 1.442950495426831vw, 4.00543212890625rem)'
    }
  }
)

[domchristie]

I have made a start with this approach here: https://github.com/domchristie/tailwind-utopia/tree/jit

[domchristie]

I worked on this last week and have a working version on the main branch here: https://github.com/domchristie/tailwind-utopia. It takes a different approach to generating the CSS, by extending Tailwind’s font sizes and spacings. As such, the API differs a fair bit.

[hollandThomas]

Works like a charm, thank you

[adamrobinson]

@domchristie Sorry to revive such an old thread but im using your fork and its working except for being able to use custom pairs - I want to use a class that scales from a size to a smaller size e.g. p-fl-lg-md but this doesnt seem to work. Is this something your fork supports ?

[domchristie]

@adamrobinson no worries! Feel free to open an issue in my repo for this.

If you fancy having a go at a fix, I think the issue might be with the pair utility function, which generates pairs of all values in a given array. If you amend this to output all permutations, that might fix it.