Search code examples
reactjstailwind-cssvite

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

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:

output of my code

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?

Solution

  • 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: [],
}