ruby-on-rails 类text-white与顺风不起作用

ui7jx7zq 于 2022-12-24 发布在 Ruby

关注(0)|答案(4)|浏览(131)

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

html.企业资源规划

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

ruby-on-rails

来源：https://stackoverflow.com/questions/67098510/class-text-white-with-tailwind-does-not-work

4条答案

按热度按时间

gupuwyp21#

如果你想在Tailwind中包含所有的默认颜色，你必须在一个"extends"括号中包含新的颜色，这样它就不会覆盖其他所有的颜色。
下面是一个例子：

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

赞(0）回复(0）举报 2022-12-24

olhwl3o22#

您可能不小心删除了默认情况下您所期望的颜色，通过添加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: [],
};

赞(0）回复(0）举报 2022-12-24

xytpbqjk3#

您的代码运行良好，正如您在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>

赞(0）回复(0）举报 2022-12-24

n6lpvg4x4#

可以在类中使用text-[color:white]

赞(0）回复(0）举报 2022-12-24