'class text-white with tailwind does not work

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

html.erb

<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>

I imported the tailwind cdn

application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
htmlcssruby-on-railstailwind-css


Solution 1:[1]

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',
            },
        },
    },
},

Solution 2:[2]

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: [],
};

Solution 3:[3]

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>

Solution 4:[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Noah Bar-Shain
Solution 2 doublejosh
Solution 3 ptts
Solution 4 Trần Tuấn Đạt

Related Questions