Tailwind Vue

Styling a Vue.js project can sometimes feel repetitive, but Tailwind CSS changes the game with its utility-first approach. It lets you build modern, responsive designs quickly—without getting stuck writing endless custom styles. Whether you're new to Tailwind or looking to sharpen your skills, this guide will walk you through setting it up in Vue.js, complete with practical examples and pro tips to help you get the most out of it.

Table of Contents

• Why Choose Tailwind CSS for Vue.js?
• Prerequisites
• Step 1: Create a Vue.js Project
• Step 2: Install Tailwind CSS
• Step 3: Configure tailwind.config.js
• Step 4: Add Tailwind Directives to Your CSS
• Step 5: Start Using Tailwind CSS
• Advanced Tips for Power Users
• Conclusion

Why Choose Tailwind CSS for Vue.js?

Tailwind CSS offers several advantages over traditional CSS frameworks like Bootstrap or Vuetify:

• Utility-First Approach : Write styles directly in your HTML/JSX without switching contexts.
• Highly Customizable: Tailor the framework to fit your project’s unique needs.
• Lightweight: Only include the styles you need, reducing bundle size.
• Responsive Design Tools: Built-in utilities make it easy to create responsive layouts. These features make Tailwind CSS an excellent choice for Vue.js developers who want to build fast, maintainable, and visually appealing applications.

Prerequisites

Before getting started, ensure you have the following installed on your machine:

• Node.js (v16 or later): Download from Node.js Official Website .
• npm or yarn: Comes bundled with Node.js.
• Basic Knowledge of Vue.js: Familiarity with Vue.js concepts will help you understand the integration better.

Step 1: Create a Vue.js Project

If you haven’t already created a Vue.js project, you can do so using Vue CLI :

npm install -g @vue/cli
vue create my-vue-app

Replace my-vue-app with your desired project name. Navigate into the project directory:

cd my-vue-app

This command sets up a new Vue.js project with all the necessary files and configurations.

Step 2: Install Tailwind CSS

To integrate Tailwind CSS into your Vue.js project, follow these steps:

Option 1: Using the CLI Tool (Recommended)

Run the following command to install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

After installation, initialize Tailwind CSS by running:

npx tailwindcss init -p

This creates two essential configuration files:

• tailwind.config.js: For customizing Tailwind CSS.
• postcss.config.js: For configuring PostCSS.

Option 2: Manual Installation

Alternatively, if you prefer manual installation, run the same command as above and then manually create the configuration files.

Step 3: Configure tailwind.config.js

Open the tailwind.config.js file in your project root and configure it according to your needs. Here’s an example configuration:

module.exports = {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}', // Adjust paths based on your project structure
  ],
  theme: {
    extend: {
      colors: {
        primary: '#1da1f2', // Example custom color
      },
    },
  },
  plugins: [],
};

The content property specifies which files Tailwind should scan for class names. Ensure you include all relevant paths to avoid missing styles.

Step 4: Add Tailwind Directives to Your CSS

Create a CSS file (e.g., src/assets/tailwind.css) and add the following Tailwind directives:

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

These directives import the base styles, component styles, and utility classes provided by Tailwind CSS.

Next, import this CSS file into your main application entry point (src/main.js):

import './assets/tailwind.css';

Step 5: Start Using Tailwind CSS

You’re now ready to start using Tailwind CSS in your Vue.js components! Here’s an example of a simple button styled with Tailwind:

<template>
	  <div class="flex justify-center items-center h-svw bg-indigo-100">
    <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
      Click Me!
    </button>
  </div>
</template>

<script>
export default {
  name: 'SimpleButton'
}
</script>

After this, you can now run npm run dev. Then our webpage will look like the image below.

Preview

Conclusion

Tailwind CSS makes styling in Vue.js fast, flexible, and lightweight. Whether you're new to it or already experienced, it gives you the tools to build beautiful, responsive designs with ease. In this guide, you learned how to set up Tailwind in your Vue.js project and explored some advanced tips to take your skills further. Now, you’re ready to bring your ideas to life with clean and efficient styling!