Tw Colors

Overview

tw-colors is a tailwind plugin that makes it easy to switch between color themes in a Tailwind app. It eliminates the need for cluttered dark variants and messy CSS variables. With tw-colors, you can effortlessly change color themes by simply changing one className. It supports all color formats, including HEX, RGB, HSL, and named colors, and offers fine-grained theming with variants. The plugin does not add any JavaScript to the bundle size, making it lightweight and efficient.

Features

• No markup change required: You don’t need to refactor your existing code.
• Zero javascript added: tw-colors is implemented using CSS only, so it doesn’t add any additional JavaScript to the bundle size.
• All color formats supported: HEX, RGB, HSL, and named colors are all supported.
• Fine-grained theming with variants: Apply specific styles based on the current theme using variants.
• Full Tailwind CSS Intellisense support: tw-colors is fully compatible with the Tailwind CSS Intellisense extension.

Installation

To install tw-colors, follow these steps:

1. Take your existing tailwind config file (tailwind.config.js) and move the colors into the createTheme plugin, giving it a name (e.g. light).
2. Apply the theme-light class anywhere in your app. Alternatively, you can use data attributes (data-theme="light").

Summary

tw-colors is a powerful tailwind plugin that simplifies the process of switching color themes in a Tailwind app. It offers various features such as support for multiple color formats, fine-grained theming with variants, and full compatibility with Tailwind CSS Intellisense. With its lightweight and efficient implementation, tw-colors is a game-changer for designing vibrant and visually appealing apps.