How to add tailwindcss to vite?

@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.