'How do I add a custom variant in Tailwindcss 3?

I'm at my wits end. I know it's possible to add custom variants with Tailwindcss 3 - and I've followed the docs as best I can. But why is this not working?

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
   // ... rest of tailwind config,
   plugins: [
     plugin(function({addVariant}) {
        addVariant('rs-d', 'html[data-desktop] &');
     })
   ]
};

We are hoping to use this to write platform specific styles (mobile, desktop, Cordova app, etc.) using Tailwind Variants, so it's critical I can keep using the html[data-PLATFORM] selector.

Interestingly, the Tailwind extension for VS Code picks up the change correctly - but it doesn't get included in the style output. Why???

Solution 1:^[1]

It turns out I had done nothing wrong on the Tailwind side. The problem was due to a backend bug, where production styles were being loaded into the development environment. Things were perfectly fine; I just couldn't see the changes.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bryan Rayner

'How do I add a custom variant in Tailwindcss 3?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]