Vite does not build tailwind based on config

Question

I created a new react-ts app using yarn create @vitejs/app my-app --template react-ts.

I installed tailwind using yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest.

I initialized tailwind: npx tailwindcss init -p.

I set from and to in postcss.config.js:

module.exports = {
  from: 'src/styles/App.css',
  to: 'src/styles/output.css',
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

I created a App.css file in src/styles:

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

According to https://vitejs.dev/guide/features.html#postcss, any valid postcss-load-config syntax is allowed. from and to seem to be allowed.

When I call yarn dev which essentially runs vite, my app is starting without build errors but tailwind output is not generated.

What am I doing wrong?

Answer 1

For those who are still having issues fixing this error: I fixed mine using this solution from another question.

Solution Link

Kindly update your vite.config file with these changes.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  }
})