Tailwind transition delay arbitrary value only working for specific values

121
January 17, 2022, at 11:20 AM

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

Rent Charter Buses Company
READ ALSO
Error connecting SQLAlchemy to MYSQL db - Error: While importing &#39;app&#39;, an ImportError was raised

Error connecting SQLAlchemy to MYSQL db - Error: While importing 'app', an ImportError was raised

I'm trying to connect a MySql database to my flask app and I'm getting an import error of appI have tried various ways and have settled with the create_engine route

111
Android Compose Bottom Navigation

Android Compose Bottom Navigation

I have a problem with compose bottom navigation barWith starting screen to be exact

136
Align the non-paranted objects using js (responsive webite)

Align the non-paranted objects using js (responsive webite)

Here's an example of what I am trying to achieve:

132