danielstgt/README.md

## README.md

      
    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('si-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>