Using existing color names in tailwind config
seems like a good idea to do it this declaritive way instead of copying the underlying colors into the tailwind css... is something like this possible? how do describe it to google? what is the correct syntax? Thank you!!
23 Replies
Just go to tailwind page and get the hex values
and use comments in the code ... ok
if you have your own colors and want to use tailwind colors you can use
const colors = require('tailwindcss/colors')Customizing Colors - Tailwind CSS
Customizing the default color palette for your project.
i dont have my own colors
i just want to alias their names
i think like this
but add the 600
But what’s indigo-400 then
and instead of writing it
primaryLight and primaryDark you can key the values like this:
extend: {
colors: {
primary: {
600: "#HEX",
700: colors.emerald.700,
}
@SuplenC thats getting very close
lol
Personally I would just copy the hex value and get on with it 😂
if you want to use the emerald as the primary you can define it like this: primary
: colors.emerald,
And in code use bg-primary-600
You should always have a whole palette ideallyeasy to generate one here https://www.tints.dev/
Tailwind CSS 10-color Palette Generator and API
A fast and flexible, HSL-tweakable palette generator and API for Tailwind CSS
having a 500 value as a base
@barry yeah usually id do that... but now im in "set this thing up right so future me can get on with it and not make mistakes" mode
this is cool @SuplenC
Yeah I just don’t see how this is better than the other way
i think this is good
as I said above it should follow the tailwind standards instead of having "primaryLight" and "primaryDark" which not only leave you room for different shades of your primary color but doesn't bound you anyway. If tomorrow you want different color just define it
primaryLight: “#FFF”
vs
primaryLight: colors.white@barry much more readable, my design stuff hasnt come out yet
it will need to be changed
by me
a lot
as i fuck with it
thnak you @SuplenC ill go with this
no problem