Guide to convert colors from regular TailwindCSS to TailwindUI

[iquito]

TailwindUI uses new colors, so when using the "regular" colors from TailwindCSS you get quite noticeable color changes as soon as you add TailwindUI.

It would be nice to have some kind of guide on how to convert the old colors to the new colors, so not everyone has to figure out how each color and background can be adjusted to this new color scheme. If TailwindCSS gets this new color palette in the future this would be advisable anyway, otherwise it will be very hard to upgrade.

[autumnwoodberry]

I actually prefer the regular tailwind colors, so i just replaced the tailwindui colors with the regular ones. 🤷‍♂

[n10000k]

Just put your colors set within the colors key and it should work from there 👍

[simonswiss]

If you want to bring the new color palette to Tailwind, you can turn on the uniformColorPaletteflag under the experimental features.

If you want to do the reverse, and bring the old colors to Tailwind UI (as mentioned in this thread), you can reference Tailwind's default theme like so:

const defaultTheme = require('tailwindcss/defaultTheme')

Since Tailwind UI brings a few new colors (-50 shade for each color, new cool-gray color), you can't just replace theme.colors with defaultTheme.colors, or you would lose these new additions and break a lot of the components.

Instead, what you want to do is deep merge the Tailwind UI colors with the default colors.

Merging the color objects

One way to achieve that is using lodash's _merge method like so:

// tailwind.config.js
const merge = require("lodash.merge");
const defaultTheme = require("tailwindcss/defaultTheme");
const tailwindUiColors = require("@tailwindcss/ui/colors");

// We merge the color objects together...
const mergedColors = merge({}, tailwindUiColors, defaultTheme.colors);

module.exports = {
  theme: {
    // ... and use that merged object for our theme colors
    colors: mergedColors,
  },
  plugins: [require("@tailwindcss/ui")],
};

You can see we import both the tailwindUiColors from @tailwindcss/ui/colors and the default colors, then merge them together and use the result to replace our theme.colors in the config.

The result will be the default Tailwind color set, while preserving the -50 shade for each color and the cool-gray color.

Manually extending each individual color

Since the -50 shades of colors were crafted in the context of the Tailwind UI color palette, they might look a bit "off" when paired with the default colors.

You could extend each color and provide your own -50 color shade like so, instead of doing a deep merge of the entire color object:

// tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      colors: {
        pink: { "50": "#fffcfd", ...defaultTheme.colors.pink },
        indigo: { "50": "#f3f7fd", ...defaultTheme.colors.indigo },
        // ...
      }
    }
  },
  plugins: [require("@tailwindcss/ui")],
};

We use extend here, so we don't lose the cool-gray color or any color we would accidentally forget to extend. 😅

Bottom line is - you can access both the default colors and the Tailwind UI colors, and then use JavaScript to "prepare" a color object to pass to your config to replace or extend the Tailwind UI color palette.

Hope this helps! 👍