No JavaScript Variants in Tailwind CSS

Most modern web development projects require JavaScript, but what do you do when clients specifically disable it? Yes, you can always provide a fallback, but it’s not easy to toggle without configuration. In Tailwind, you can create a variant that increases specificity on certain elements when the no-js class on the html element.

In my projects, I will add this class to elements to hide specific elements.

<div class="no-js:hidden">...</div>

It doesn’t have too much use, but it’s a nice-to-have when you need it.

To do this, you have to add the no-js class directly to the HTML element and an inline script that will remove or replace the no-js class. I prefer to replace it with a js class to indicate that JavaScript is enabled, but you can remove it if you like.

<html class="no-js">
    // ...

      document.documentElement.classList.replace('no-js', 'js')

And you have to add an additional plugin to your tailwind.config.js file that will add a no-js variant.

plugins: [
  function ({ addVariant, e }) {
    addVariant('no-js', ({ modifySelectors, separator }) => {
      modifySelectors(({ className }) => {
        return `.no-js .${e(`no-js${separator}${className}`)}`