Tailwind CSS does not work with the @apply rule in react/vite

Question

I initialized an app with react/vite, installed tailwind.css and tried to use the @apply in index.css. But the styles does not really apply, the div is with the class, but appear the error: Unknown property name Here are my files:

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.container {
  @apply bg-red-500;
}

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

app.jsx

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="container">
        <Routes>
          <Route path="/" element={<h1>Home</h1>} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

I already tried to use jit in tailwind.config.js, but does not work too.

Answer 1

It seems like Tailwind is missing from your CSS build pipeline. Consider checking you have postcss installed in your project. Then, check you have a postcss.config.js or postcss.config.cjs file in the root of your project, and it has tailwindcss as a plugin like:

module.exports = {
  plugins: {
    tailwindcss: {},
  },
}

or

export default {
  plugins: {
    tailwindcss: {},
  },
}