Setting Up Tailwind CSS 4.0 in Vue.js: A Step-by-Step Guide

Introduction

When it comes to modern web development, Vue.js and Tailwind CSS are two powerful tools that developers love. Vue.js, a progressive JavaScript framework, makes building interactive UI components seamless, while Tailwind CSS, a utility-first CSS framework, enables developers to style applications efficiently without writing custom CSS.

Combining Vue.js with Tailwind CSS allows for rapid UI development, improved maintainability, and a highly customizable design system. Whether you're building a small project or a large-scale application, this combination ensures both performance and flexibility.

In this guide, we’ll walk through how to set up a Vue.js project and integrate Tailwind CSS. By the end, you'll also learn how to create a beautiful Stats component using FlyonUI - Free Tailwind CSS component library to see this combination in action.

Let’s dive in!

A Quick Overview of Vue.js

Vue.js is a progressive JavaScript framework designed for building dynamic user interfaces. Its core features include declarative rendering, component-based architecture, and two-way data binding, making it a powerful choice for modern web applications.

Vue’s reactivity system enables developers to create interactive applications with minimal effort, ensuring a smooth and engaging user experience.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build modern, responsive, and highly customizable user interfaces without writing custom CSS. Instead of using predefined components (like Bootstrap), Tailwind allows you to compose designs directly in your HTML using small, reusable classes.

Key Enhancements in Tailwind CSS 4

● 🚀 Optimized Build Sizes – Uses Lightning CSS for faster compilation and reduced final bundle sizes.

● ⚡ Improved Performance – Significantly faster processing and CSS generation.

● 🎨 Enhanced Color Palette – Provides better color contrast and accessibility.

● 📦 Advanced Tree Shaking – Removes unused styles more efficiently, keeping the CSS output minimal.

● 🔗 Stronger Framework Integration – Improved compatibility with Vue.js, React, and other modern frameworks.

With these enhancements, Tailwind CSS 4 further simplifies styling in Vue.js, making UI development more efficient.

The Perfect Combination: Vue.js and Tailwind CSS

Vue.js and Tailwind CSS work seamlessly together, providing an optimal development experience. Here’s why they complement each other so well:

1. Component-Based Design with Utility-First Styling

Vue.js’s component-driven approach pairs perfectly with Tailwind’s utility-based styling, enabling developers to build reusable and visually consistent UI components effortlessly.

2. Streamlined Development Workflow

Tailwind eliminates the need for separate CSS files by allowing developers to apply styles directly within Vue templates. This approach enhances productivity by reducing context switching.

3. Built-In Responsiveness

Tailwind’s responsive utilities (sm, md, lg, etc.) integrate seamlessly with Vue.js, making it easier to create mobile-friendly and adaptive designs.

4. Optimized Performance

With Tailwind’s Just-In-Time (JIT) compilation and Vue’s tree shaking, only the necessary styles and JavaScript are included in the final build, ensuring fast load times.

5. Simple Theme Customization

Vue’s reactivity system and Tailwind’s theme customization allow effortless implementation of dynamic themes, including dark mode and personalized design systems.

Setting Up Vue.js with Tailwind CSS 4

Follow these steps to integrate Tailwind CSS 4 into a Vue.js project using Vite.

Step 1: If you don’t already have a Vue 3 project set up, write below command to do so:

npm create vue@latest
cd <project-name>
npm install

Step 2: Install Tailwind CSS v4

Run the following command to install Tailwind CSS v4 along with its Vite plugin:

npm install -D tailwindcss @tailwindcss/vite

Step 3: Configure Vite to Use Tailwind CSS

Edit vite.config.ts (or vite.config.js if using JavaScript) and add Tailwind CSS as a plugin:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

Step 4: Add Tailwind to Your Styles

Edit the CSS file src/style.css and add tailwind css:

@import "tailwindcss";

Step 5: Navigate to src/main.ts and ensure your style.css is imported:

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

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

Step 6: Start Your Development Server

Run the Vite development server:

npm run dev

That’s it! You’ve successfully set up Tailwind CSS v4 in a Vue 3 project using Vite.

Example: Instead of defining CSS classes in a separate file, you can apply Tailwind classes directly:

<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Click Me
  </button>
</template>

This makes styling faster, more maintainable, and inline with Vue’s reactivity.

Building a Modern Stats Component in Vue.js with FlyonUI

Here, we’ll use FlyonUI, an open-source Tailwind Components Library. It offers a wide range of customizable, accessible, and ready-to-use components for faster development.

Let’s integrate Vue.js with FlyonUI to build a stats component. For a detailed installation guide, please refer to FlyonUI Vue.js Integration.

Step 1: Install flyonui

Install flyonui via npm.

npm install -D flyonui@latest

Step 2: Update style.css to use FlyonUI

@import "tailwindcss";
@plugin "flyonui";
@import "./node_modules/flyonui/variants.css"; /* Require only if you want to use FlyonUI JS component */

/* If you gitignored node_modules use below method */
@source "./node_modules/flyonui/dist/index.js"; /* Require only if you want to use FlyonUI JS compo

Step 3: Import FlyonUI JavaScript

Modify src/main.ts|js:

// FlyonUI
import "flyonui/flyonui";

...
app.mount("#app");

Step 4: Reinitialize Components on Mount

Add reinitialization in App.vue:

<script setup>
  onMounted(() => {
    setTimeout(() => window.HSStaticMethods.autoInit(), 100)
  });
</script>

...

Step 5: Ready with the setup.

Now, let's explore an example showcasing the appearance and implementation of a button component.

<button class="btn btn-primary">Click Me</button>

Let’s create a stats component using FlyonUI.
<div class="flex gap-4">
  <div class="stats max-sm:w-full">
    <div class="stat">
      <div class="stat-figure text-base-content size-8">
        <span class="icon-[tabler--world] size-8"></span>
      </div>
      <div class="stat-title">Website Traffic</div>
      <div class="stat-value">32K</div>
      <div class="stat-desc">5% ↗︎ than last week</div>
    </div>
  </div>
  <div class="stats max-sm:w-full">
    <div class="stat">
      <div class="stat-figure text-base-content size-8">
        <span class="icon-[tabler--users-group] size-8"></span>
      </div>
      <div class="stat-title">New Signups</div>
      <div class="stat-value">1.2K</div>
      <div class="stat-desc">12% increase this month</div>
    </div>
  </div>
  <div class="stats max-sm:w-full">
    <div class="stat">
      <div class="stat-figure size-12">
        <div class="avatar">
          <div class="size-12 rounded-full">
            <img
              src="https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png"
              alt="User Avatar"
            />
          </div>
        </div>
      </div>
      <div class="stat-value text-success">95%</div>
      <div class="stat-title">Customer Retention</div>
      <div class="stat-desc">Steady over last quarter</div>
    </div>
  </div>
</div>

Conclusion

Integrating Tailwind CSS with Vue.js enhances frontend development by offering a streamlined styling approach, responsive design utilities, and optimized performance. By leveraging FlyonUI, developers can further accelerate UI development with pre-built, accessible components.

Here's the repository where you can find more details or see the setup: vuejs-taiwindcss-setup.

Talking about Vuejs, you can also consider using Vue Templates for your project. Vue templates comes with ready to use components and apps, making your development process easier and smoother.

Disclaimer: The views expressed herein are for reference only and don't necessarily represent the official views of Alibaba Cloud.

Community

Setting Up Tailwind CSS 4.0 in Vue.js: A Step-by-Step Guide

Introduction

A Quick Overview of Vue.js

What is Tailwind CSS?

Key Enhancements in Tailwind CSS 4

The Perfect Combination: Vue.js and Tailwind CSS

Setting Up Vue.js with Tailwind CSS 4

Building a Modern Stats Component in Vue.js with FlyonUI

Conclusion

Read previous post:

Read next post:

Neel_Shah

You may also like

Comments

Neel_Shah

Related Products

Web Hosting Solution

Web Hosting

EMAS Superapp

Web App Service