Descriptive shades use the value solely as the name without the key. For example midnight.light is named Light and any other colors with the same shade are dropped in palette.json.
When using Tailwind's DEFAULT shade, the slug contains -DEFAULT, which is inconsistent with Tailwind's usage.
tailwind.config.js
...
colors: {
midnight: {
DEFAULT: '#21213c', // DEFAULT is used by Tailwind to define .text-midnight
light: '#30304b',
},
grass: {
DEFAULT: '#8cc64b',
light: '#9bd55a',
},
},
...
Descriptive shades use the value solely as the name without the key. For example
midnight.light
is namedLight
and any other colors with the same shade are dropped inpalette.json
.When using Tailwind's DEFAULT shade, the slug contains
-DEFAULT
, which is inconsistent with Tailwind's usage.tailwind.config.js
Before:
After: