tailwindcss-radix-colors-plugin

Introduction

tailwindcss-radix-colors-plugin is a plugin for Tailwind CSS that adds the Radix UI Color Palette to your Tailwind CSS configuration. This plugin allows you to use Radix colors directly in your Tailwind utility classes, making color management effortless and consistent across your projects.

Key Features

Some of the key features tailwindcss-radix-colors-plugin offers include:

• Seamless Integration: The plugin works effortlessly with Tailwind CSS, allowing you to take advantage of the Radix color palette without any disruption to your workflow.
• Dynamic Color Management: Manage your colors efficiently with this plugin. It maintains the consistency of your design while also providing a rich color palette for your projects.
• Accessibility: Colors are WCAG-compliant, ensuring your designs are accessible to a wide range of users, including those with visual impairments.
• Customization: The plugin is highly customizable, allowing you to tailor the palette to your specific needs
• Dark Mode OOTB: The plugin supports dark mode out of the box, allowing you to easily switch between light and dark mode. But, when you want to deviate from Radix's automatic inversions, you can still access the variables you need not to limit your creativity or your design freedom!

Get Started

Prerequisites

To use the Tailwind CSS Radix Colors plugin, ensure:

• You're using Node.js version 12 or newer.
• Your project uses Tailwind CSS 2.0 or newer.
• Your project processes CSS with PostCSS (true for tools like Create React App, Next.js, or Gatsby).

Installation

Install the plugin with npm:

npm install tailwindcss-radix-colors-plugin

Basic Usage

To use the plugin, import it in your Tailwind CSS configuration file (tailwind.config.js) and add it to your configuration:

const { tailwindRadixPlugin } = require('tailwindcss-radix-colors-plugin')

/** @type {import('tailwindcss').Config} \*/
module.exports = {
    content: ['./src/**/\*.{js,ts,jsx,tsx,mdx}'],
    darkMode: 'class',
    theme: {
        // your theme configuration
    },
    variants: {
        // your variants configuration
    },
    plugins: [
        tailwindRadixPlugin(),
        // your other plugins
    ],
}

Your Tailwind CSS utility classes now have access to the Radix color palette. You can use these classes just like any other utility classes provided by Tailwind CSS:

<div className="text-crimson-500 bg-indigo-1000">
  <!-- your content -->
</div>

Advanced Usage

Tailwind Dark Mode: Class vs Media

Tailwind CSS provides two strategies for dark mode: 'class' and 'media'. The 'media' strategy uses the CSS prefers-color-scheme media feature to automatically switch based on the user's system preferences:

module.exports = {
    darkMode: 'media',
    // ...
}

The 'class' strategy allows manual dark mode toggling. Dark variants are applied whenever the 'dark' class is present on the html element:

module.exports = {
    darkMode: 'class',
    // ...
}

NOTE: Please note that you should not use the 'media' strategy if you want to support manual toggling.

For more details, refer to the official Tailwind CSS documentation.

Including Specific Colors

If you prefer to include specific colors from the Radix palette, pass an options object to the plugin function:

plugins: [
    tailwindRadixPlugin({
        colors: ['red', 'blue', 'green'],
    }),
    // ...
],

You can specify either the specific light or dark variants of a color, or you can specify the general color you want to include. For example, you can set colors to ['redLight'] or ['redDark'], or you can set colors to ['red'] to include both the light and dark variants of the color.

Please note if you are using NextJS you may need to restart your dev server after adding or removing colors.