'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 1:^[1]

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.

Solution 2:^[2]

it solved my problem

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  mode: 'jit',
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    // classes that are generated dynamically, e.g. `rounded-${size}` and must
    // be kept
    safeList: [],
    content: [
      './index.html',
      './src/**/*.{vue,js,ts}',
      // etc.
    ],
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}

Solution 3:^[3]

make sure your postcss.config.js file is in your app root directory

Solution 4:^[4]

In your vite.config.js, make sure to include Tailwind in your plugins.

plugins: [react(),tailwindcss()],

Also, you can import Tailwind with the following.

import tailwindcss from 'tailwindcss';

Solution 5:^[5]

Maybe you are forget to fill content object in tailwind config

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Alexander Zeitler
Solution 2	O?uzhan Filiz
Solution 3	yechale degu
Solution 4	Karl Hill
Solution 5	ferdiansyah0611

'Vite does not build tailwind based on config

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]