skip to Main Content

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.

2

Answers


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