Tailwind CSS isn't working in a Vite-React-Typescript project

Question

I have this code that I want to use to test if everything was installed, so I can start a new project:

const App = () => {

  return (
    <div className="min-h-screen flex justify-center items-center">
      <h1 className="text-3xl font-bold text-blue-600">
        Install & Setup Vite + React + Typescript + Tailwind CSS 3
      </h1>
    </div>
  )
}

export default App

And when I start Vite this is what I see:

These are the dependencies that I've installed in my package.json:

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }

My tailwind.config.cjs is:

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

My index.css:

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

My main.tsx:

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

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

After a while on my terminal I get this:

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.

warn - https://tailwindcss.com/docs/content-configuration

Why isn't my setup working?

e-motta · Accepted Answer · 2023-03-10 19:26:45Z

2

You need to add index.html to the content array in tailwind.config.js and type {js,ts,jsx,tsx} without any spaces:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html", // <= add this
    "./src/**/*.{js,ts,jsx,tsx}", // <= no spaces
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

edited Mar 10, 2023 at 19:26

answered Mar 10, 2023 at 18:23

e-motta

7,5953 gold badges10 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BOGDAN DONICI Over a year ago

Already tried, but still the same

e-motta Over a year ago

Have you run npx tailwindcss init -p?

BOGDAN DONICI Over a year ago

Yes, I did that

e-motta Over a year ago

{js,ts,jsx,tsx} needs to be with no spaces. Updated the answer with that.

Collectives™ on Stack Overflow

Tailwind CSS isn't working in a Vite-React-Typescript project

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related