Install Tailwind CSS in Vue 3 and Vite App

By /

Tailwind CSS is a utility-first CSS framework that makes styling web applications faster and easier. With Tailwind, you can build custom user interfaces without writing custom CSS.

In this tutorial, we’ll walk through how to setup and configure Tailwind CSS in a Vue 3 project using Vite. By the end, you’ll be able to leverage the power of Tailwind to rapidly style your Vue components.

Prerequisites

Before starting, make sure you have Node.js and Vue CLI installed on your machine. Some basic knowledge of Vue 3 and Tailwind CSS is helpful as well.

Now let’s follow the detailed steps below to install TailwindCSS in Vue 3 project.

Step 1 – Set up a New Vue 3 Project

First, use Vue CLI to generate a new Vue project, if you don’t have already.

vue create my-project

This will prompt you to select preset options. Once done, navigate into the project folder and install dependencies:

cd my-project 
npm install

Step 2 – Install Tailwind CSS in Vue 3

Next, install Tailwind CSS and PostCSS with npm:

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

It will install tailwind and postcss along with its dependencies.

Step 3 – Configure Tailwind CSS and Post CSS

Next, we need to create the tailwind.config.js and postcss.config.js files in the root directory of the project.

To configure Tailwind, first generate the tailwind.config.js file in the root folder of the Vue 3 project.

npx tailwindcss init -p

This creates a minimal tailwind.config.js config file.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, edit the config to set the purge option which removes unused CSS for production:

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  // ...
}

Learn more about Tailwind configuration file in the configuration documentation.

Also create a postcss.config.js file to include Tailwind and autoprefixer:

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

Learn more about PostCSS plugins, read the documentation on using PostCSS as your preprocessor

Step 4 – Include Tailwind CSS in Project

Now create a index.css file in the ./src/index.css directory and use the @tailwind directive to include Tailwind’s base, components, and utilities styles.

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

In main.js, import the Tailwind CSS stylesheet:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css' //add the index.css here

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

Read adding base styles, extracting components, and adding new utilities for extending Tailwind with your own custom CSS.

Now you can run the local development server using npm run serve and create Vue Components using Tailwind CSS.

Step 5 – Use Tailwind Classes in Vue Components

Now you can apply Tailwind’s utility classes in your Vue components:

<template>
  <h1 class="text-3xl font-bold text-blue-500">
    Welcome to my App! 
  </h1>  
</template>

See Tailwind’s documentation for the various utility classes you can leverage.

Step 6 – Build and Run Vue Project

Use npm run serve during development to have changes hot-reloaded. Run npm run build to generate optimized CSS for production.

Conclusion

In this tutorial we went through the steps to integrate Tailwind CSS into a Vue 3 and Vite powered project. With Tailwind installed, you can now rapidly build custom user interfaces without writing custom CSS. Check out Tailwind’s documentation to learn more about using its utility-first classes. Happy styling!

Scroll to Top