类文本-带有顺风的白色不工作。

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

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

Answer 1

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

下面是一个例子：

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

Answer 2

您可能会意外地删除了默认情况下所期望的颜色，将theme.textColor设置添加到tailwind.config.js中，我还让类从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

您的代码运行良好，如您在顺风游戏上所看到的。标题和标签都以白色显示。

也许你有另一个css文件来干扰顺风的样式。

​

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

​