Use a js or no-js variant depending on the availability of JavaScript, e.g. no-js:hidden or js:bg-blue-500.
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...
plugins: [
plugin(function({ addVariant, e }) {
addVariant('no-js', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.no-js .${e(`no-js${separator}${className}`)}`;
});
});
}),
plugin(function({ addVariant, e }) {
addVariant('js', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.js .${e(`js${separator}${className}`)}`;
});
});
}),
],
}<html class="no-js">
<head>
<script>document.documentElement.className=document.documentElement.className.replace('no-js','js')</script>
</head>
<body>
</body>
</html>
If you want to use
no-js:, you need to change the following:plugin(function({ addVariant, e }) { - addVariant('si-no-js', ({ modifySelectors, separator }) => { + addVariant('no-js', ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { return `.no-js .${e(`no-js${separator}${className}`)}`; }); }); }),