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

Question

I have a Next js project with tailwind. For whatever reason, certain colors work while others don't. For example:

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

When I run the code and "title" is not null, text-blue-400 actually changes the text color. But when I run it with "title" as null text-red-400 doesn't actually change the text color. it just remains black. It's really odd because if I use text-red-500 it works!!!

this is my 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: [], }

here are the imports in _app.js

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

and finally this is 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;
}

If anyone can help I'd greatly appreciate it. Idk why this isn't working.

Answer 1

Sometimes you need to stop and restart when installing Tilwindcss.

Did you try to stop it and run it again?

---

also, if you don't need the second conditional operator argument, you can use just a double "&&"

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