tailwindcss-body-variant
v1.0.1
Published
A Tailwind CSS plugin that adds a body variant to conditionally apply styles based on the presence of a certain class on the body tag.
Downloads
12
Maintainers
ayarseReadme
Tailwind CSS Body Variant Plugin
This lightweight Tailwind CSS plugin allows you to style elements conditionally based on the presence of specific classes in the <body> tag.
Installation
npm install tailwindcss-body-variantAdd the plugin to your tailwind.config.js file:
module.exports = {
// ... other Tailwind config
plugins: [
require('tailwindcss-body-variant'),
// ... other plugins
],
};Usage
Add a class to your
<body>tag to represent the state you want to target.Example:
<body class="menu-open"></body>Prefix any utility class with
body-[class-name]:to apply styles only when the.class-nameclass is present on the body.Example:
<div class="body-[menu-open]:opacity-50"></div>Example (React):
import React, { useEffect } from 'react'; const MenuComponent = ({ open }: { open: boolean }) => { useEffect(() => { document.body.classList.add('menu-open'); return () => { document.body.classList.remove('menu-open'); }; }, []); return <div>...</div>; }; const AnotherComponent = () => { return ( <div className="body-[menu-open]:opacity-50 transition-opacity duration-300"> ... </div> ); }; export { MenuComponent, AnotherComponent };