Tailwind transition delay arbitrary value only working for specific values

Question

I am getting really inconsistent behavior with tailwinds arbitrary value functionality, specifically in relation to the transition delay property. When I use any random value directly within the arbitrary value it has worked for every value I have tested so far (random positive integers). Ex...

<li className="delay-[2455]">{some text}</li>

But if I were to use a variable, the class will only occasionally have any effect depending on the value, seemingly randomly. Ex...

const delay = "250ms";
return <li className={`delay-[${delay}]}`></li>

This segment above will produce a valid class but the segment below will have no effect and will not produce a valid class

const delay = "500ms";
return <li className={`delay-[${delay}]}`></li>

I am not sure if this is something that I am doing wrong or is some weird quirk in tailwind. I am open to any and all suggestions. If it makes a difference I am using typescript in conjunction with react. I am using tailwindcss version 3.0.11 and postcss version 8.4.5 These are my tailwind.config.js and my postcss.config.js files

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
        'xsm': '428px',
        '2xsm': '360'
      },
      fontFamily: {
        title: ['Patrick Hand'],
        body: ['Balsamiq Sans']
      },
      transitionProperty: {
        'opacity': 'opacity',
      },
    },
  },
  plugins: [],
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Answer 1

Right from the docs:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS

It means that you need to use full class name, not dynamic concatenation of its parts.

For example you can make a function like that:

function getClassByDelay(delay) {
  return {
    250: 'delay-250',
    500: 'delay-500',
    750: 'delay-750',
  }[delay]
}

And use it like so: <li className={getClassByDelay(delay)}></li>

If you really need to use dynamic classes then you can also use another approach: just add them to the safelist array in the config:

// tailwind.config.js
module.exports = {
  content: [
    // ...
  ],
  safelist: [
    'delay-250',
    'delay-500',
    'delay-750',
    // etc.
  ]
  // ...
}

That way Tailwind will know that it needs to generate this safelist classes anyway, regardless if it finds them in your source code or not.

Obviously it has downside that you need to manage this list and not forget to delete unused classes from the config if you stop using them in the code, otherwise they will be a dead weight in your bundle.

More info: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth