CODEWITHSUNDEEP
reactjstailwind-csspostcssvite
iamaprogrammer
iamaprogrammer

Reputation: 135

Why aren't the Tailwind classes taking effect in my Vite React project?

I have a Vite React project that uses Tailwind via PostCSS. However, none of the classes are reflecting the the localhost. Below are the files in the project:

postcss.config.js:

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

tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

App.js:

const App = () => {
  return (
    <div className="App">
      <h1 class="text-3xl font-bold underline">
        Hello world!
      </h1>
    </div>
  )
}
export default App

This was all done following the instructions in the Tailwind documentation at https://tailwindcss.com/docs/installation/using-postcss.

Why doesn't it work?

Upvotes: 4

Views: 4074

Answers (2)

Bhuvan Ade
Bhuvan Ade

Reputation: 31

The reason for the error can be Unknown at rule @tailwindcss

To solve this you must download this extension

Upvotes: 1

Kostas Minaidis
Kostas Minaidis

Reputation: 5412

You should update the tailwind.config.js file to include .jsx files:

{html,js} => {html,js,jsx}

module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Upvotes: 5

Related Questions