Getting Started with Tailwind CSS and Vue.js

This comprehensive guide will walk you through setting up a Vue.js project with Tailwind CSS, a popular utility-first CSS framework. By the end of this tutorial, you'll have a fully configured development environment ready for building modern web applications.

Prerequisites

Before you begin, make sure you have the following installed on your system:

Node.js (version 18.3 or higher)
npm (comes with Node.js) or yarn
A code editor (VS Code, WebStorm, etc.)

Step 1: Create a New Vue Application

The first step is to create a new Vue.js project using the official Vue scaffolding tool. This tool provides an interactive CLI that helps you configure your project with the features you need.

Open your terminal or PowerShell and run the following command:

npm create vue@latest

> npx
> create-vue

┌  Vue.js - The Progressive JavaScript Framework
│
◇  Project name (target directory):
│  vue-tailwindcss
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  TypeScript
│
◇  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to
confirm)
│  none
│
◇  Skip all example code and start with a blank Vue project?
│  No

Scaffolding project in C:\Nodejs Projects\vue-tailwindcss...
│
└  Done. Now run:

   cd vue-tailwindcss
   npm install
   npm run dev

| Optional: Initialize Git in your project directory with:

   git init && git add -A && git commit -m "initial commit"

Understanding the Setup Options

During the setup process, you made several choices:

Project name: vue-tailwindcss - This is the folder name for your project
TypeScript: Selected for type safety and better development experience
Example code: Kept to provide a starting point for your application

The scaffolding tool creates a complete project structure with all necessary configuration files, build tools, and a sample application.

Step 2: Install Project Dependencies

Now that the project structure is created, navigate into the project directory and install the required dependencies:

cd vue-tailwindcss
npm install

This command installs all the packages defined in your package.json file, including:

Vue.js core library
Vite (the build tool)
Vue Router (if selected)
Development dependencies

The installation may take a minute or two depending on your internet connection. Once complete, you'll have a node_modules folder containing all the dependencies.

Step 3: Install Tailwind CSS

With your Vue project set up, it's time to add Tailwind CSS. Run the following command to install Tailwind CSS and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

What gets installed:

tailwindcss: The core Tailwind CSS library
@tailwindcss/vite: The official Vite plugin for Tailwind CSS v4, which handles CSS processing and optimization

This approach uses Tailwind CSS v4, which has a simplified setup process compared to previous versions.

Step 4: Configure Vite to Use Tailwind CSS

Next, you need to configure Vite (your build tool) to use the Tailwind CSS plugin. Open your vite.config.ts file and update it as follows:

import { fileURLToPath, URL } from "node:url";

import tailwindcss from "@tailwindcss/vite";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import vueDevTools from "vite-plugin-vue-devtools";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueDevTools(), tailwindcss()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Key changes explained:

Import statement: import tailwindcss from "@tailwindcss/vite"; - Imports the Tailwind CSS Vite plugin
Plugins array: tailwindcss() is added to the plugins array, enabling Tailwind CSS processing during the build
The existing plugins (vue() and vueDevTools()) remain unchanged

This configuration tells Vite to process your CSS files with Tailwind CSS, enabling all utility classes and features.

Step 5: Import Tailwind CSS in Your Styles

The final step is to import Tailwind CSS into your main stylesheet. Open (or create) the src/assets/main.css file and add the following:

@import "tailwindcss";

This single import statement includes all of Tailwind CSS's base styles, components, and utilities. In Tailwind CSS v4, this simplified syntax replaces the previous @tailwind directives.

Make sure this CSS file is imported in your src/main.ts file:

import "./assets/main.css";

This ensures Tailwind CSS is loaded when your application starts.

Step 6: Start the Development Server

You're now ready to run your Vue application with Tailwind CSS! Start the development server with:

npm run dev

This command:

Starts the Vite development server
Watches for file changes and hot-reloads your application
Makes your application available at http://localhost:5173 (or another port if 5173 is busy)

Open your browser and navigate to the URL shown in the terminal to see your application running.

Testing Your Tailwind CSS Setup

To verify that Tailwind CSS is working correctly, let's create a simple test component. Open src/App.vue and try adding some Tailwind utility classes:

<template>
  <div
    class="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"
  >
    <div class="bg-white rounded-lg shadow-2xl p-8 max-w-md">
      <h1 class="text-3xl font-bold text-gray-800 mb-4">Hello Tailwind CSS!</h1>
      <p class="text-gray-600 mb-6">
        Your Vue.js application is now powered by Tailwind CSS.
      </p>
      <button
        class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200"
      >
        Get Started
      </button>
    </div>
  </div>
</template>

If you see styled content with gradients, shadows, and proper spacing, Tailwind CSS is working correctly!

Common Tailwind CSS Utility Classes

Here are some commonly used Tailwind CSS utility classes to get you started:

Layout

flex, grid - Display types
items-center, justify-center - Flexbox alignment
p-4, m-4 - Padding and margin (4 = 1rem)
w-full, h-screen - Width and height

Typography

text-sm, text-lg, text-3xl - Font sizes
font-bold, font-semibold - Font weights
text-gray-800, text-blue-500 - Text colors

Backgrounds & Borders

bg-white, bg-blue-500 - Background colors
rounded-lg, rounded-full - Border radius
border, border-gray-300 - Borders

Effects

shadow-lg, shadow-2xl - Box shadows
hover:bg-blue-600 - Hover states
transition, duration-200 - Transitions

Project Structure

Your final project structure should look like this:

vue-tailwindcss/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   └── main.css          # Tailwind CSS import
│   ├── components/
│   ├── App.vue
│   └── main.ts               # Application entry point
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts            # Vite + Tailwind configuration
└── README.md

Next Steps

Now that you have Tailwind CSS set up with Vue.js, you can:

Explore the Tailwind CSS documentation: Visit tailwindcss.com to learn about all available utilities
Install Tailwind CSS IntelliSense: Get the VS Code extension for autocomplete and class suggestions
Customize your theme: Create a tailwind.config.js file to customize colors, spacing, and more
Build components: Start creating reusable Vue components with Tailwind CSS styling
Learn responsive design: Use Tailwind's responsive prefixes like md:, lg:, xl: for different screen sizes

Troubleshooting

Styles not applying?

Make sure main.css is imported in src/main.ts
Check that the Tailwind plugin is added to vite.config.ts
Try restarting the development server

Build errors?

Ensure all packages are installed: run npm install again
Check that you're using Node.js version 18.3 or higher
Clear the node_modules folder and reinstall: rm -rf node_modules && npm install

Conclusion

Congratulations! You've successfully set up a Vue.js project with Tailwind CSS. This powerful combination allows you to build modern, responsive web applications quickly using utility-first CSS classes. Happy coding!

🔗 Resources

Complete Source Code: github.com/rakib-587/vue-tailwindcss
Tailwind CSS Documentation: tailwindcss.com
Vue.js Documentation: vuejs.org
Vite Documentation: vitejs.dev

Found this guide helpful? Star the repository on GitHub and feel free to contribute or report issues!

Getting Started with Tailwind CSS and Vue.js

Prerequisites

Step 1: Create a New Vue Application

Understanding the Setup Options

Step 2: Install Project Dependencies

Step 3: Install Tailwind CSS

Step 4: Configure Vite to Use Tailwind CSS

Step 5: Import Tailwind CSS in Your Styles

Step 6: Start the Development Server

Testing Your Tailwind CSS Setup

Common Tailwind CSS Utility Classes

Layout

Typography

Backgrounds & Borders

Effects

Project Structure

Next Steps

Troubleshooting

Styles not applying?

Build errors?

Conclusion

🔗 Resources

More from this blog

Fixing MongoDB Transaction Error in Node.js (Windows)

AWS ElastiCache with Valkey: Complete Setup Guide

Coroutines vs. Callbacks: The Similarity

What is Dispatcher, Thread and Threadpool?

Command Palette

Prerequisites

Step 1: Create a New Vue Application

Understanding the Setup Options

Step 2: Install Project Dependencies

Step 3: Install Tailwind CSS

Step 4: Configure Vite to Use Tailwind CSS

Step 5: Import Tailwind CSS in Your Styles

Step 6: Start the Development Server

Testing Your Tailwind CSS Setup

Common Tailwind CSS Utility Classes

Layout

Typography

Backgrounds & Borders

Effects

Project Structure

Next Steps

Troubleshooting

Styles not applying?

Build errors?

Conclusion

🔗 Resources

More from this blog