How to add tailwindcss to vite?

by lindsey.homenick , in category: Javascript , a month ago

How to add tailwindcss to vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by raphael_tillman , a month ago

@lindsey.homenick 

To add Tailwind CSS to a Vite project, follow these steps:

  1. Install Tailwind CSS and its dependencies:
1
npm install -D tailwindcss postcss autoprefixer


  1. Create a tailwind.config.js file by running:
1
npx tailwindcss init


  1. Create a postcss.config.js file and add the following configuration for Tailwind CSS:
1
2
3
4
5
6
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}


  1. In your project's main CSS file (e.g., index.css), import Tailwind CSS styles:
1
2
3
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';


  1. Modify the Vite configuration file (usually vite.config.js) to include the Tailwind CSS plugin:
1
2
3
4
5
6
7
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import windiCSS from 'vite-plugin-windicss'

export default defineConfig({
  plugins: [vue(), windiCSS()]
})


  1. Run your Vite project:
1
npm run dev


You can now use Tailwind CSS utility classes in your HTML or Vue components.