Question 281686 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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: {},
  },
}
    Login or Signup to reply.
  2. 0

    I just ran into this problem because I forgot to install postcss and autoprefixer.

    npm install -D postcss autoprefixer

    Then create a postcss.config.js file with the following content:

    export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search