Search code examples
htmlcsstailwind-cssvite

vite does not build tailwind css

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.

Solution

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

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

    // Open terminal
npm run dev

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

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