How to install tailwind in vue.js 3 + vite?

@jerad 

To install Tailwind CSS in a Vue.js 3 + Vite project, you can follow these steps:

1. Create a new Vue.js 3 project with Vite by running the following command in your terminal:

1

npm init @vitejs/app

1. Choose the Vue template when prompted.
2. Install Tailwind CSS and its dependencies by running the following command in your terminal:

1

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

1. Initialize a Tailwind configuration file by running the following command in your terminal:

1

npx tailwindcss init -p

1. Create a new CSS file to include Tailwind CSS styles. For example, you can create a styles.css file in the src directory of your project.
2. Import Tailwind CSS styles in the styles.css file:

1
2
3

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

1. Import the styles.css file in your main.js file to include Tailwind CSS styles in your Vue components:

1
2
3
4
5

import { createApp } from 'vue'
import App from './App.vue'
import './styles.css'

createApp(App).mount('#app')

1. Configure PostCSS to use Tailwind CSS by creating a postcss.config.js file in the root of your project with the following content:

1
2
3
4
5
6

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

That's it! Tailwind CSS should now be successfully installed and configured in your Vue.js 3 + Vite project. You can start using Tailwind CSS classes in your Vue components to style your application.