vite does not build tailwind css

Question

I installed tailwind and other tools using npm install -D tailwindcss postcss autoprefixer vite

I created tailwind and postcss config files using npx tailwindcss init -p

tailwind.config.js contains:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js contains:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

My CSS file exits in css\tailwind.css and contains:

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

The CSS file is linked to my HTMl page using <link href="/css/tailwind.css" rel="stylesheet" >

When I run vite, my app starts without build errors but tailwind output is not generated.

Answer 1

This works for me. Once you've done what Tailwindcss says in its docs, in your vite.config.js (I tried this on JavaScript file. I am not sure if this works on TypeScript in the same way) import tailwindcss:

import tailwindcss from 'tailwindcss'

Then add tailwindcss as a PostCSS plugin like this:

css: {
  postcss: {
    plugins: [tailwindcss],
  },
}

Once you've done that your vite.config.js will look like this:

/*Other imports*/
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [],
  resolve: {
    /*something*/
  },
  css: {
    postcss: {
      plugins: [tailwindcss],
    },
  },
});

Answer 2

You need to adjust a few settings, feels like you're pretty close.

1. Edit Tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Start Vite building script with 'npm run dev' command.

// Open terminal
npm run dev

3. (Optional) Copy demo h1 property into your index file and test

<h1 class="text-3xl text-blue-700">Testing</h1>