CODEWITHSUNDEEP
htmlcsstailwind-cssvite
Abdullah Al-Shameri
Abdullah Al-Shameri

Reputation: 136

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.

Upvotes: 10

Views: 10611

Answers (2)

RT -Jeo-
RT -Jeo-

Reputation: 121

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],
    },
  },
});

Upvotes: 12

Joshua Mitchener
Joshua Mitchener

Reputation: 104

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>

Upvotes: 8

Related Questions