Class text-white with Tailwind CSS does not work

Question

I try to put a text in white color but it does not work why?

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<h1 class="text-3xl text-center pt-5 bg-green-800 text-white">Epicery</h1>  <!--  here it works very well the text-white -->
<div class="flex pt-5 pb-5 bg-green-800">
  <div class="mx-auto">
    <ul class="flex">
      <li class="mr-6 text-white"> <!-- here it does not work text-white -->
        <a class="text-white text-sm hover:text-gray-900 hover:bg-white p-4 rounded" href="#">Link</a>
      </li>
    </ul>
  </div>
</div>

Noah Bar-Shain · Accepted Answer · 2021-05-25 22:54:50Z

84

If you want to include all of the default colors in Tailwind, you have to include the new colors in an "extends" bracket so it won't overwrite everything else.

Here's an example:

module.exports = {
    theme: {
        extend: {
            colors: {
                my_color: '#4dcb7a',
            },
        },
    },
},

answered May 25, 2021 at 22:54

Noah Bar-Shain

9675 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Olli Over a year ago

Am I understanding this right, that I have to include some random color so that I can include the default colors?

MeV Over a year ago

That's correct @Olli

dengsauve Over a year ago

This is the correct answer, wish it would default to extend and you would have to specifically overwrite the default colors.

Abdulsattar Mohammed Over a year ago

@Olli This is incorrect. There are two types of config: {theme: {colors: {}}} or {theme: {extend: {colors: {}}}. The former overrides colors and while the latters extends the base colors. So, OP must have overridden colors. You definitely don't need to add a random color to include all the base colors

Syed Danial Over a year ago

i accidentally put colors outside of extend which causes the issues.

doublejosh · Accepted Answer · 2021-05-20 21:41:41Z

8

You may have accidentally removed colors you expect by default by adding theme.textColor settings to tailwind.config.js I also had classes disappear from Tailwind compiled styles.

Tailwind resets all links, moving to an opt-in style paradigm.

If your config file does not include a theme entry for textColor, the default includes colors that cause classes to be generated... like text-white and text-black.

Be sure to add EVERY color you need and expect!

module.exports = {
  purge: [],
  theme: {
    textColor: {
      primary: blue,
      secondary: purple,
      white: "#FFF",  <<< this
      black: "#000",  <<< this
    },
    extend: {},
  },
  variants: {},
  plugins: [],
};

answered May 20, 2021 at 21:41

doublejosh

5,8144 gold badges42 silver badges47 bronze badges

1 Comment

createscape Over a year ago

I don't think you need to include white and black unless you're going for an off-white and just calling it white. If you move the colours within the "extend" brackets and remove the white and black the default tailwind colours should work (which includes white and black). See @Noah Bar-Shain's answer above.

TarangP · Accepted Answer · 2022-12-23 06:23:00Z

2

you can use text-[color:white] in your class

edited Dec 23, 2022 at 6:23

TarangP

2,7385 gold badges24 silver badges42 bronze badges

answered Apr 1, 2022 at 14:53

Trần Tuấn Đạt

211 bronze badge

Comments

nic-ole · Accepted Answer · 2023-09-15 15:39:57Z

in my case I had my colors: {} object outside of the extend object.

Before: (and the custom colors were being utilised with no issues)

  module.exports = {
  content: [ "./src/**/*.{js,jsx,ts,tsx}",],
  theme: {
    extend: {},
    colors: {
      'dark-green': '#4e6c50',
      'green-grey': '#A2A378',
      'brown': '#c1ae93',
      'beige': '#a7ab90'
    }
  },
  plugins: [],
}

After:

  module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
  theme: {
    extend: {
      colors: {
        'dark-green': '#4e6c50',
        'green-grey': '#A2A378',
        'brown': '#c1ae93',
        'beige': '#a7ab90'
      }
    },

  },
  plugins: [],
}

You should now be able to use text-white and other properties with no issues

ptts · Accepted Answer · 2021-04-14 20:52:57Z

0

Your code works fine, as you can see below on Tailwind Play. Both the heading and a tag are displayed in white.

Maybe you have another css file that interferes with tailwind's styles.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<h1 class="pt-5 text-3xl text-center text-white bg-green-800">Epicery</h1>
<div class="flex pt-5 pb-5 bg-green-800">
  <div class="mx-auto">
    <ul class="flex">
      <li class="mr-6 text-white">
        <a class="p-4 text-sm rounded hover:text-gray-900 hover:bg-white" href="#">Link</a>
      </li>
    </ul>
  </div>
</div>

answered Apr 14, 2021 at 20:52

ptts

2,1049 silver badges15 bronze badges

Collectives™ on Stack Overflow

Class text-white with Tailwind CSS does not work

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related