tailwindcss-open-variant weekly downloads statistics

TailwindCSS Open Variant

Open variant for TailwindCSS, to use with the HTML tag and apply styles only when the element is open.

• TailwindCSS Open Variant • 💾 Installation • 📝 Usage • 🔖 Changelog • ⬆️ Upgrading • 🎉 Contributing • 👷 Credits • ♻️ License

💾 Installation

You can install the package with npm or yarn using the following commands:

Once installed, require it as a plugin in your Tailwind config file.

Finally, add the open variant as variants to your desired modules.

📝 Usage

Once installed, you can prefix your defined utilities with open: to apply them only when the current details tag, or the parent details tag of the given node, is opened.

You can use this to, for example, display a dropdown menu where the button text changes depending on whether it is open or not:

You can also manipulate styles depending on the open state, so as to make the summary fit in with the newly shown element.

🔖 Changelog

Please see the changelog file for more information on what has changed recently.

⬆️ Upgrading

Please see the upgrading file for details on upgrading from previous versions.

🎉 Contributing

Please see the contributing file and code of conduct for details on contributing to the project.

👷 Credits

• Liam Hammett • All Contributors

♻️ License

The MIT License (MIT). Please see the license file for more information.