@carloitaben/tailwindcss-js NPM

tailwindcss-js

Apply tailwindcss classes only when JavaScript is enabled.

Installation

npm i @carloitaben/tailwindcss-js

Requirements

tailwindcss >= 3.3
ESM Tailwind config

Usage

Add the plugin to the plugins array in your tailwindcss configuration file:

import type { Config } from "tailwindcss"
import { jsPlugin } from "@carloitaben/tailwindcss-js"

export default {
  // ...
  plugins: [
    // ...
    jsPlugin(),
  ],
} satisfies Config

You now need to add a script tag to your head element. Here are some examples with popular frameworks:

Astro

---
import { script } from "@carloitaben/tailwindcss-js"
---

<head>
  <!-- ... -->
  <script is:inline src={script}></script>
  <!-- ... -->
</head>

Next.js (App Router)

TODO

Next.js (Pages Router)

TODO

Remix

TODO

SvelteKit

TODO

Vanilla (w/o bundler)

<script src="data:text/javascript;base64,KGZ1bmN0aW9uKCl7ZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsYXNzTGlzdC5hZGQoImpzIik7fSgpKQ=="></script>

You can now add JS-only styles using the js variant prefix:

<div src="js:opacity-0 js:translate-y-1/2 md:js:translate-y-full"></div>

Note When applying multiple variants, place the js prefix in the last place.

Configuration

`prefix`

The generated variant name. Defaults to "js".

jsPlugin({
  prefix: "js-only",
  // ...
})

<div className="js-only:opacity-0"></div>

License

MIT

tailwindcss plugin js noscript

0.0.1

11 months ago

0.0.0

11 months ago