Step-by-step guide to install Vue Js with tailwind CSS, and DaisyUI for modern web development

Install vue

1. Install vuejs

   terminal or console

   npm create vue@latest ./
   

   Select your preferences Package name: ...

   • √ Add TypeScript? ... No / Yes
   • √ Add JSX Support? ... No / Yes
   • √ Add Vue Router for Single Page Application development? ... No / Yes
   • √ Add Pinia for state management? ... No / Yes
   • √ Add Vitest for Unit Testing? ... No / Yes
   • √ Add an End-to-End Testing Solution? » Playwright
   • √ Add ESLint for code quality? ... No / Yes
   • √ Add Prettier for code formatting? ... No / Yes
   • √ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

2. install node module

   terminal or console

   npm i
   

3. Run server

   terminal or console

   npm run dev
   

4. install tailwindcss

   terminal or console

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

   additional tailwind plugin

   terminal or console

   npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio
   

   install daisyui

   terminal or console

   npm i daisyui
   

5. Configure tailwind.config.js

   tailwind.config.js

       import typography from "@tailwindcss/typography";
       import forms from "@tailwindcss/forms";
       import aspectRatio from "@tailwindcss/aspect-ratio";
       import daisyui from "daisyui";
       /** @type {import('tailwindcss').Config} \*/
       export default {
       content: ["./index.html", "./src/**/\*.{vue,js,ts,jsx,tsx}"],
       theme: {
       extend: {},
       },
       plugins: [typography, forms, aspectRatio, daisyui],
       };
   

6. Open main.css as this is already imported inside main.js. Comment everything inside main.css & then paste the following tailwind directive

   Must comment out everything inside main.css

   main.css

   /* src/main.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;