Search code examples
tailwind-csspostcssvite

Vite does not build tailwind based on config

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?

Solution

  • from and to are not required.

    I had to update my import statement for the css file in main.tsx to point to src/styles/App.css which will cause vite to run postcss.