How to Install and Setup Tailwind CSS in Vue 3

6 mins0
How to Install and Setup Tailwind CSS in Vue 3

Tailwind CSS is one of the most popular utility-first CSS frameworks, making it quick and efficient to build modern, responsive designs. If you’re working with Vue 3, integrating Tailwind CSS into your project is simple.

Tailwind CSS offers several advantages that make it a popular choice for modern web development.

  • Utility-first approach enables rapid and custom design without writing custom CSS.
  • Drastically reduces development time by allowing direct styling within HTML markup.
  • Built-in responsive utilities ensure easy mobile-friendly and adaptive layouts.
  • Highly customizable through configuration files for colors, spacing, and themes.
  • Purge unused styles feature optimizes final CSS file for faster loading.
  • Streamlines workflow by keeping code organized and minimizing context switching.
  • Consistency and reusability across projects due to standardized utility classes.
  • Reduces the need for complex class names and large custom CSS files.

In this guide, we’ll walk through the step-by-step process to install and set up Tailwind CSS in a Vue 3 application.

Vue 3 Project Setup or Installation

If you don’t already have a Vue 3 project, create one using Vite. You can skip this vue 3 setup step if you already have Vue 3 application. Open terminal and enter below command to create new Vue 3 project:

npm create vite@latest my-vue-app

Choose Vue or Vue + TypeScript when prompted. Next, Open or navigate to root directory of your application and enter below command to install.

cd my-vue-app

npm install

It will install all the required dependencies using NPM automatically.

Install Tailwind CSS

In this step, we will install Tailwind CSS with it’s dependencies. Open terminal and hit below command into it:

npm install -D tailwindcss postcss autoprefixer

Next, generate the Tailwind and PostCSS config files:

npx tailwindcss init -p

This will create two files in your project root:

  • tailwind.config.js
  • postcss.config.js

Configure Tailwind

Open tailwind.config.js and update the content option so Tailwind knows where to look for your Vue files:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Set up PostCSS configuration

Open a postcss.config.js file in your project’s root directory and add the following code:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

Add Tailwind to Your CSS

Open the src/assets/main.css (or create it if it doesn’t exist) and add the Tailwind directives:

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

Make sure this CSS file is imported in your src/main.js (or main.ts):

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

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

Test Tailwind in Vue

Now, let’s check if Tailwind is working. Open App.vue or any other view file and update the template:

<template>
  <div class="flex items-center justify-center min-h-screen bg-gray-100">
    <h1 class="text-4xl font-bold text-blue-600">
      Tailwind CSS + Vue 3 with Codewolfy!
    </h1>
  </div>
</template>

Run the development server:

npm run dev

Open the URL shown in your terminal (usually http://localhost:5173) and you should see your styled message.

Conclusion

We have successfully installed and configured Tailwind CSS in your Vue 3 project. You can now leverage the full potential of Tailwind CSS’s utility classes to style your Vue components and create beautiful user interfaces.

For a complete guide on modern web development, explore our blog Top 10 JavaScript Frameworks to learn about the most popular frameworks, their features, and use cases.

Related Articles