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.