@carloitaben/tailwindcss-js
v0.0.1
Published
Apply `tailwindcss` classes only when JavaScript is enabled.
Maintainers
carloitabenReadme
tailwindcss-js
Apply tailwindcss classes only when JavaScript is enabled.
Installation
npm i @carloitaben/tailwindcss-jsRequirements
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 ConfigYou 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
jsprefix in the last place.
Configuration
prefix
The generated variant name. Defaults to "js".
jsPlugin({
prefix: "js-only",
// ...
})<div className="js-only:opacity-0"></div>