为什么文本颜色在 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 ? &lt;div className={`text-2xl mt-2 mb-2 ${title==='Valid Url!' ? 'text-blue-400' : 'text-red-400'}`}&gt;{title}&lt;/div&gt; : 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，但我仍然有这个问题。有没有人经历过类似的事情？

标签： javascript reactjs next.js tailwind-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> 
      }
</>

【讨论】：