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],
       };