class text-white with tailwind 不起作用

Question

我尝试将文本设为白色，但为什么不起作用？

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>

我导入了顺风CDN

应用程序.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">

Answer 1

如果您想在 Tailwind 中包含所有默认颜色，您必须将新颜色包含在“扩展”括号中，这样它就不会覆盖其他所有颜色。

下面是一个例子：

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

Answer 2

theme.textColor您可能通过添加设置意外删除了您默认期望的颜色，tailwind.config.js我也让类从 Tailwind 编译的样式中消失。

Tailwind 重置所有链接，转向选择加入样式范例。

如果您的配置文件不包含 的主题条目textColor，则默认包含导致生成类的颜色...例如text-white和text-black。

请务必添加您需要和期望的每种颜色！

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

Answer 3

您的代码工作正常，正如您在下面的Tailwind Play上看到的那样。标题和标签均显示为白色。

也许你有另一个 css 文件会干扰 tailwind 的样式。

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