🎨 tailwindcss-radix-colors-plugin

Advanced Usage

Tailwind Dark Mode using Class vs Media

Tailwind has a built-in dark mode feature that allows you to toggle between light and dark mode using the class attribute. This is great for simple use cases, but it can be a bit cumbersome to use in more complex scenarios.

Dark Mode is a first-class citizen of many apps and operating systems on the web, which means users almost expect it to be available on your site.

Tailwind comes with a built in dark variant that allows you to toggle between light and dark mode to style your site differently when dark mode is enabled.

Media Strategy

By default, TailwindCSS uses what it calls the media strategy. Under the hood this uses the prefers-color-scheme CSS media feature, and is set up to automatically switch between light and dark mode based on the user's system preferences by setting the strategy like this in the tailwind config:

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

Class Strategy

Tailwind also let's you toggle dark mode manually using the class strategy.

The only difference is in the tailwind config file, where you can set which strategy you want to use.

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

When you are using the class strategy, the dark variants will be applied whenever the dark class is present on the html element of the tree.

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

Summary

In summary, in either case the markup you are writing will look the same but it is the underlying implementation that is different.

For more information about how Dark Mode works in tailwind, check out the official documentation - P.S. it's awesome!

Specific Color Inclusion

You can choose to include a specific subset of colors from the Radix palette. Pass an options object to the plugin function in your tailwind.config.js:

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

Specific Color Exclusion

While not generally recommended, you can exclude specific colors, variants, or weights. This can be useful if you're looking to reduce your CSS bundle size:

plugins: [
  tailwindRadixPlugin({
    exclude: {
      colors: ['yellow'],
      variants: ['dark'],
      weights: ['500', '600'],
    },
  }),
  // ...
],

Theme Pinning

If you want to pin a specific theme on a subset of elements in the DOM, you can do this by using the pin-theme-light and pin-theme-dark classNames. This enables you to have a top level theme on your application (that is light, dark, or can switch between both), and simultaneously fix a subset of the page to a specific theme.

To enable this feature, you should set the darkMode option in your tailwind config to radix:

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

This is because of clashes between the Tailwind dark mode strategy and the radix strategy. Please note you only need to enable this feature if you want to use the pin-theme-light and pin-theme-dark classNames.

<!-- Any divs in the scope of pin-theme-light will always be light themed -->
<div class="pin-theme-light">
  <div className="w-10 h-10 bg-green-500 dark:bg-crimson-500"></div>
</div>

<!-- Any divs in the scope of pin-theme-dark will always be dark themed -->
<div class="pin-theme-dark">
  <div className="w-10 h-10 bg-yellow-500 dark:bg-blue-500"></div>
</div>