So the time has come to update my boilerplate to Tailwind 4, and I can't work out how to transfer my custom variant setup. In my Tailwind 3 tailwind.config.js I have this:

plugins: [
    plugin(function({ addVariant }) {
      addVariant('js', '.js &')
      addVariant('no-js', '.no-js &')
    })
  ],

To add a couple of variants. I think I need to use the new @custom-variant in my styles.css file but I can't work out the syntax. Or I may be barking up the wrong tree. All my other settings I have managed to move over fine.

So the time has come to update my boilerplate to Tailwind 4, and I can't work out how to transfer my custom variant setup. In my Tailwind 3 tailwind.config.js I have this:

plugins: [
    plugin(function({ addVariant }) {
      addVariant('js', '.js &')
      addVariant('no-js', '.no-js &')
    })
  ],

To add a couple of variants. I think I need to use the new @custom-variant in my styles.css file but I can't work out the syntax. Or I may be barking up the wrong tree. All my other settings I have managed to move over fine.

• css
• tailwind-css
• tailwind-css-4

1 Answer 1

The equivalent for those custom variants would be:

@custom-variant js (.js &);
@custom-variant no-js (.no-js &);

The first token is the name of the variant. The second parameter is the selector modifier.