為什么文本顏色在 Tailwind css + next.js 項目中不起作用

Question

我有一個順風的 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”作為空 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;
}

如果有人可以提供幫助，我將不勝感激。 知道為什么這不起作用。

Answer 1

有時在安裝 Tilwindcss 時需要停止並重新啟動。

您是否嘗試停止並再次運行它？

---

此外，如果您不需要第二個條件運算符參數，您可以只使用雙“&&”

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