Tailwind vs TailwindUI colors

[maccman]

Can someone explain to me why Tailwind has a particular set of colors, and TailwindUI's package has a different set of colors?

For example, bg-yellow-50 is #fdfdea in TailwindUI and #fefce8 in core Tailwind.

[adamwathan]

Hey! So bg-yellow-50 is actually #fffbeb in both Tailwind UI and Tailwind CSS. I looked into the colors you mentioned and am able to explain what I think you're seeing...

Tailwind UI v1 (before Tailwind CSS v2 came out) had a custom color palette (that's part of what you got when you installed the @tailwindcss/ui plugin). This is because we discovered while working on Tailwind UI that the default Tailwind color palette in Tailwind CSS v1 just wasn't good enough, and we were having a hard time designing with it.

The #fdfdea color you mentioned comes from the old @tailwindcss/ui plugin you used to have to install before Tailwind CSS v2 was released back in November. When Tailwind 2 came out, that plugin became obsolete and Tailwind UI now relies only on default Tailwind 2.0 colors, which themselves are slightly different from the colors we shipped with the plugin.

So you are either looking at an old Tailwind UI project that hasn't been updated to Tailwind 2.0, or maybe you are browsing the v1 area of Tailwind UI that we kept available for customers who purchased before Tailwind 2.0 was released. Since November though, any bg-yellow-50 in Tailwind UI (like this alert) has been #fffbeb, which is the same color you get when you use bg-yellow-50 in vanilla Tailwind 2 (see this playground example).

Now the other component to your question is the #fefce8 color — this is the yellow-50 color from the extended color palette. The extended palette is meant to be a giant palette that you use to pick the colors you need and curate your own smaller palette. It includes 5 different sets of grays for example — you would never use those in the same app, you would just pick the gray scale you want for your project.

Similarly, we have rose and red which are both options for your app's red; lime, green, and emerald are all options for for app's green; indigo, violet, and purple are all options for your app's purple, and amber and yellow are options for your app's yellow. Now even though these colors all have unique names, generally it's way more practical to alias them in your project. So instead of bg-true-gray-300 you just write bg-gray-300. Similarly, if you choose amber as your yellow, you might want to might bg-yellow-50 instead of bg-amber-50.

The default palette in Tailwind is an example of a custom palette curated from the extended palette, with aliases applied. We use coolGray as the default gray, emerald as the default green, violet as the default purple, and amber as the default yellow.

So bg-yellow-50 out of the box in Tailwind comes from the amber color palette, which is #fffbeb. The yellow in the extended palette is there in case you want to swap it out for amber, but it's not available by default.

I tried to cover all of this very extensively in the "Customizing Colors" documentation, so give that a read if you haven't already 👍🏻

[maccman]

This is incredibly helpful - thank you. I've uninstalled the old @tailwindcss/ui package.