为啥文本颜色在 Tailwind css + next.js 项目中不起作用

Posted 2023-03-07

【中文标题】为啥文本颜色在 Tailwind css + next.js 项目中不起作用

【英文标题】：Why isn't text-color working in Tailwind css + next.js project为什么文本颜色在 Tailwind css + next.js 项目中不起作用

【发布时间】：2021-11-10 23:04:59

【问题描述】：

我有一个带有尾风的 Next js 项目。无论出于何种原因，某些颜色有效，而其他颜色则无效。例如：

title ? <div className=`text-2xl mt-2 mb-2 $title==='Valid Url!' ? 'text-blue-400' : 'text-red-400'`>title</div> : null

当我运行代码并且“title”不为空时，text-blue-400 实际上会改变文本颜色。但是，当我使用“title”作为 null text-red-400 运行它时，它实际上并没有改变文本颜色。它只是保持黑色。这真的很奇怪，因为如果我使用 text-red-500 就可以了！！！

这是我的 tailwind.config.js

module.exports = 
  mode: 'jit',
  purge: ['./pages/**/*.js,ts,jsx,tsx', './components/**/*.js,ts,jsx,tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: 
      width: 
        '92': '23rem',
        '112': '28rem',
        '128': '32rem',
        '160': '40rem',
        '192': '48rem',
        '224': '56rem',
        '256': '64rem',
        '288': '72rem',
        '320': '80rem'
      ,
      minWidth: 
        '20': '5rem',
        '400': '400px'
      
    ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],

这是 _app.js 中的导入

import 'tailwindcss/tailwind.css';
import '../styles/globals.css';
import 'react-datepicker/dist/react-datepicker.css'

最后是 globals.css

html,
body 
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

/*
a 
  color: inherit;
  text-decoration: none;


* 
  box-sizing: border-box;
*/

.tooltip 
  display: none;
  position: absolute;


.has-tooltip:hover .tooltip 
  display: block;
  z-index:50;

如果有人能提供帮助，我将不胜感激。不知道为什么这不起作用。

【问题讨论】：

除了text-color 之外的其他类是否正常工作？

我认为您的 _app.js 配置有误，因为您同时使用了 import 'tailwindcss/tailwind.css' 和 `import '../styles/globals.css'。请仔细阅读this part of the docs。

嗨，hisam，是的，这是唯一不能正常工作的顺风相关代码。我将尝试删除 globals.css，而是在需要时直接在组件中使用 css 模块。我的 globals.css 文件非常小，所以没有必要。

我删除了我的 globals.css，但我仍然有这个问题。有没有人经历过类似的事情？

【参考方案1】：

安装 Tilwindcss 时有时需要停止并重新启动。

您是否尝试停止它并再次运行它？

---

另外，如果您不需要第二个 conditional operator 参数，您可以只使用 双“&&”

<>
      title && 
      <div className=`text-2xl mt-2 mb-2 $title==='Valid Url!' ? 'text-blue-400' : 'text-red-400'`>title</div> 
      
</>