danielstgt/README.md

Last active August 15, 2024 15:47

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/danielstgt/3981078dab453c77d817a0311056daa6.js"></script>
Save danielstgt/3981078dab453c77d817a0311056daa6 to your computer and use it in GitHub Desktop.

Download ZIP

Tailwind CSS JavaScript Modifier/Variant

Raw

README.md

Usage

Use a js or no-js variant depending on the availability of JavaScript, e.g. no-js:hidden or js:bg-blue-500.

Tailwind CSS Config

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}`)}`;
                });
            });
        }),
    ],
}

index.html

<html class="no-js">
    <head>
        <script>document.documentElement.className=document.documentElement.className.replace('no-js','js')</script>
    </head>
    <body>
    </body>
</html>

PolMrt commented Aug 15, 2024

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}`)}`;
    });
  });
}),

Author

danielstgt commented Aug 15, 2024

@PolMrt thanks for pointing that typo out, I've updated the gist 🙏