Tengo un proyecto Next js con viento de cola. Por alguna razón, ciertos colores funcionan mientras que otros no. Por ejemplo:

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

Cuando ejecuto el código y el "título" no es nulo, text-blue-400 en realidad cambia el color del texto. Pero cuando lo ejecuto con "título" como texto nulo-rojo-400 en realidad no cambia el color del texto. solo queda negro. ¡Es realmente extraño porque si uso text-red-500 funciona!

este es mi 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: [], }

aquí están las importaciones en _app.js

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

y finalmente esto es 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; }

Si alguien puede ayudar, se lo agradecería mucho. No sé por qué esto no funciona.