Vue3 Tailwind CSS | Beginner Tutorial

Using Tailwind CSS in Vue 3 Project

Incorporating Tailwind CSS into your Vue 3 project is a popular choice due to its utility-first approach to writing CSS, allowing you to apply styles directly through class names, making style writing more concise and intuitive.

Tailwind CSS Tutorial:

Tailwind CSS Official Website: https://tailwindcss.com/

Github Address: https://github.com/tailwindlabs/tailwindcss

Tailwind CSS is a powerful CSS framework that makes style writing more concise and modular through a utility-first approach. Unlike traditional class-based CSS frameworks, Tailwind provides a set of low-level utility classes that can be used directly on HTML elements for quick and flexible custom design construction.

Full Introduction Example Using Vue 3 and Tailwind CSS

This example demonstrates how to integrate Tailwind CSS with Vue 3 and utilize its features to build responsive interfaces.

Installing Vue 3 and Tailwind CSS

First, ensure you have Vue 3 and Tailwind CSS installed.

To install Vue 3, execute the following command in your terminal to create a new Vue 3 project:

npm create vue@latest

Follow the prompts in the output window to input the project name and proceed with the installation:

The initialization process will require setting some initial options. Use the arrow keys to select the desired options.

Navigate to the initialized directory vue-tailwind-app and install dependencies:

cd vue-tailwind-app
npm install

Install Tailwind CSS:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

After installation, the directory structure should look like this:

Configuring Tailwind CSS

Edit the tailwind.config.js file and modify it as follows:

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

Adding Tailwind Directives

Create a styles.css file in the src/assets directory and add the following content:

/* src/assets/styles.css */
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

Then, import this file in src/assets/main.js:

import './assets/styles.css'

Creating Vue Components and Styles

You can now start writing your Vue 3 components and using Tailwind CSS to style your pages.

App.vue

App.vue is the main component of the application, containing basic usage of Vue 3 and Tailwind CSS.

<template>
    <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
    <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
    <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">
    Vue 3 + Tailwind CSS Example
    </h1>
    <!-- Input field and button -->
    <div class="mb-4">
    <label for="name" class="block text-sm font-medium text-gray-700">Username</label>
    <input
    type="text"
    id="name"
    v-model="username"
    placeholder="Enter username"
    class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    </div>
    <button
    @click="submitForm"
    class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200"
    >
    Submit
    </button>
    <!-- Display username -->
    <p v-if="submitted" class="mt-4 text-center text-gray-600">Welcome, {{ username }}!</p>
    </div>
    </div>
    </template>
    
    <script>
     export default {
      data() {
       return {
        username: '',
        submitted: false
       };
      },
      methods: {
       submitForm() {
        if (this.username) {
         this.submitted = true;
        } else {
         alert('Please enter a username');
        }
       }
      }
     };
    </script>
    
    <style scoped>
    /* Custom styles here if needed */
    </style>

Additionally, we can set our own port in the vite.config.js file, such as setting the port to 3000:

import { fileURLToPath, URL } from 'node:url'
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueDevTools from 'vite-plugin-vue-devtools'
    
    // https://vite.dev/config/
    export default defineConfig({
     plugins: [
      vue(),
      vueDevTools(),
     ],
     resolve: {
      alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
      },
     },
     server: {
      port: 3000, // Specified port number
     },
    })

After setting up, run the project with the command npm run dev, and the output should be:

# npm run dev
    > vue-tailwind-app@0.0.0 dev
    > vite
    
    VITE v6.0.3 ready in 333 ms
    ➜ Local: http://localhost:3000/
    ➜ Network: use --host to expose
    ➜ Vue DevTools: Open http://localhost:3000/__devtools__/ as a separate window
    ➜ Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
    ➜ press h + enter to show help

Access http://localhost:3000/, and it should display:

Next, let's try creating a list. Modify the App.vue file as shown below:

<template>
    <div class="min-h-screen flex flex-col">
    <!-- Header -->
    <header class="bg-blue-600 text-white py-4">
    <div class="container mx-auto text-center">
    <h1 class="text-3xl font-semibold">List Page</h1>
    </div>
    </header>
    <!-- List -->
    <main class="flex-grow py-8">
    <div class="container mx-auto px-4">
    <ul class="space-y-4">
    <li v-for="(item, index) in items" :key="index" class="p-4 bg-white border rounded-lg shadow-md">
    <h2 class="text-xl font-semibold">{{ item.title }}</h2>
    <p class="text-gray-600">{{ item.description }}</p>
    </li>
    </ul>
    </div>
    </main>
    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-4">
    <div class="container mx-auto text-center">
    <p>© 2024 My Vue3 App</p>
    </div>
    </footer>
    </div>
    </template>
    
    <script>
     export default {
      name: "ListPage",
      data() {
       return {
        items: [
         { title: "Item 1", description: "This is the description of the first item." },
         { title: "Item 2", description: "This is the description of the second item." },
         { title: "Item 3", description: "This is the description of the third item." },
         // More items
        ],
       };
      },
     };
    </script>
    
    <style scoped>
    /* Add additional styles here if needed */
    </style>

Code Explanation:

Header (header): Uses bg-blue-600 to set the background color, text-white to set the text color, py-4 to set vertical padding, and container mx-auto to center the container with fixed width.
List (main): Uses flex-grow to make the list section fill the remaining space, py-8 to add vertical padding. Each list item uses Tailwind classes like p-4, bg-white, border, rounded-lg, shadow-md to set the appearance.
Footer (footer): Uses bg-gray-800 to set a dark background, text-white to set white text, and py-4 to set padding.