Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR updates the default config to include all of the colors available in the extended color palette.
This is a breaking change because several of the colors in the extended palette have names that conflict with the colors in the default palette, but we have included several measures to minimize the impact.
Changes
Default colors are no longer aliased
In v2.0, several of the default colors were actually aliases for the extended colors:
gray
coolGray
green
emerald
yellow
amber
purple
violet
Although we still think this is a powerful way to think about curating your own color palette (it's nice to type
bg-gray-500
instead ofbg-cool-gray-500
everywhere in your app if you are only using one gray), it caused a lot of confusion and was hard to explain in the documentation.For v3.0, all of the extended colors will be enabled by default and nothing will be aliased. As a result, the colors that were aliased in v2 will be renamed to their extended palette name, with the exception of
gray
, where we are renaming the extended color rather than the default color.gray
coolGray
gray
green
emerald
emerald
yellow
amber
amber
purple
violet
violet
This means that after upgrading to v3, if you were using utilities like
bg-green-500
,text-yellow-700
, orborder-purple-400
, the rendered output will be different, asgreen
by default now refers to the old extendedgreen
, whereas in v2,green
actually meantemerald
(see what I mean about this being confusing?)The default
gray
will still look the same after upgrading.If you want to upgrade without changing the visual appearance of your project (which is what I would recommend), you would need to re-alias these colors in your config:
Of course if you are already using a custom color palette, this won't impact you at all.
Grays have been renamed
As part of enabling all of the extended colors by default, we've given the different gray shades shorter single-word names to make them more practical to use and make it less awkward for them to co-exist at the same time.
blueGray
slate
gray
coolGray
gray
gray
zinc
trueGray
neutral
warmGray
stone
Since only
gray
was enabled in the default v2 palette, this is not a breaking change for anyone who had not aliased any of the extended grays as part of a custom palette.Furthermore, we've kept all of the old names that we could to ease the upgrade process, and just emit a warning if you import one of the old colors.
For example, this will still totally work, you'll just see a console warning letting you know that you should change
trueGray
toneutral
in your config file:The only place this is not true is when importing the v2 extended
gray
color. Because v3 also has agray
(which used to becoolGray
), it's impossible for us to emit a warning since we can't know if you are using the new gray intentionally, or if you are upgrading and expecting it to be the old gray.If you were using the old
gray
color in your custom palette, you will need to change it tozinc
to upgrade with no visual changes:Added
transparent
andcurrent
totailwindcss/colors
Previously, the
transparent
andcurrent
(currentColor
) colors were only present in the default config, and not included intailwindcss/colors
which meant you had to reference them like this when you wanted to include them in a custom palette:Now, you can reference both of those options from the
colors
object, which feels a little bit more consistent and will help people avoid wasting 30 seconds expecting it to work but then having to change it:Complete color reference
Here is a comprehensive list of how the default (not extended) v2 color palette compares to this new unified v3-destined color palette:
transparent
transparent
current
current
black
black
black
white
white
white
blueGray
slate
gray
coolGray
gray
gray
zinc
trueGray
neutral
warmGray
stone
red
red
red
orange
orange
yellow
amber
amber
yellow
yellow
lime
lime
green
emerald
emerald
green
green
teal
teal
cyan
cyan
sky
sky
blue
blue
blue
indigo
indigo
indigo
purple
violet
violet
purple
purple
fuchsia
fuchsia
pink
pink
pink
rose
rose