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

Member

by jerad , in category: Javascript , a month ago

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

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by mallory_cormier , a month ago

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