# 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: ```bash 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: ```bash 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: ```bash 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: ```typescript 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:** 1. **Import statement**: `import tailwindcss from "@tailwindcss/vite";` - Imports the Tailwind CSS Vite plugin 2. **Plugins array**: `tailwindcss()` is added to the plugins array, enabling Tailwind CSS processing during the build 3. 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: ```css @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: ```typescript 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: ```bash 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`](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: ```plaintext ``` 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: ```plaintext 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: 1. **Explore the Tailwind CSS documentation**: Visit [tailwindcss.com](http://tailwindcss.com) to learn about all available utilities 2. **Install Tailwind CSS IntelliSense**: Get the VS Code extension for autocomplete and class suggestions 3. **Customize your theme**: Create a `tailwind.config.js` file to customize colors, spacing, and more 4. **Build components**: Start creating reusable Vue components with Tailwind CSS styling 5. **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](http://github.com/rakib-587/vue-tailwindcss) * **Tailwind CSS Documentation**: [tailwindcss.com](http://tailwindcss.com) * **Vue.js Documentation**: [vuejs.org](http://vuejs.org) * **Vite Documentation**: [vitejs.dev](http://vitejs.dev) --- *Found this guide helpful? Star the repository on GitHub and feel free to contribute or report issues!*