Unable to get Tailwind CSS or Intellisense to function

Question

I cannot get my react app to style divs using Tailwind, nor will the intellisense suggest any styling for me.

import './App.css';

function App() {
  return (
   <div className="text-red-400">Hello World</div>
  );
}

export default App;

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

craco.config

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

I expect the text to be red using this, but instead it remains white. I've tried installing Intellisense for CSS alongside Tailwind CSS IntelliSense to no avail.

Answer 1

Tailwind funcitonality fixed by changing the tailwind.config.js: You need to use content: [] and delete purge: [] and input components in the array, I also deleted mode: 'jit', since it's baked into Tailwind 3.0. Corrected version below:

module.exports = {
  content: ['./public/**/*.html',
  './src/**/*.{js,jsx,ts,tsx,vue}'],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}