CODEWITHSUNDEEP
csstailwind-css
partseven
partseven

Reputation: 61

How to style color in Tailwind?

I want to make my text color in red but it doesnt work. But background are working well.

i tried this:

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./src/**/*.js'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'light-blue': colors.lightBlue,
        cyan: colors.cyan,
        'fuchsia': colors.fuchsia,
        fuchsia: colors.fuchsia,
        red: '#60A5FA'
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

and want to make my text in Red.

<p className='red'>Red</p>

Why it doesnt work?

Upvotes: 0

Views: 2343

Answers (2)

alip still learning
alip still learning

Reputation: 21

don’t do that, try this instead :

<p className='text-red'>Red</p>

or you can use the default color palette provided by tailwind with the following code:

<p className='text-red-500'>Red</p>

Upvotes: 0

kissu
kissu

Reputation: 46676

To have your text in red, you need to use text-red here, the colors is just a thing that will be used by borders, shadows and so on. Not only for the text color. That's why you need to specify it.

More on the official docs: https://v1.tailwindcss.com/docs/text-color#app

And on color customization: https://v1.tailwindcss.com/docs/customizing-colors#app

You could use this playground for testing, here is a working solution: https://play.tailwindcss.com/fCziM7VHas

Notice that here, I'm using bg-fuchsia-500 since you're using the default color of TailwindCSS and that it goes down from 100 to 900 by the default config. More in the docs linked above.

Upvotes: 2

Related Questions