带顺风的类 text-white 不起作用答案

【问题标题】：class text-white with tailwind does not work带顺风的类 text-white 不起作用
【发布时间】：2021-07-09 21:40:09
【问题描述】：

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

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

【问题讨论】：

标签： html css ruby-on-rails tailwind-css

【解决方案1】：

您的代码运行良好，您可以在下面的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>

【讨论】：

【解决方案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: [],
};

【讨论】：

【解决方案3】：

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

这是一个例子：

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

【讨论】：