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

Installing Vue Js with tailwind CSS, and DaisyUI using Vite

Installing Vue Js with tailwind CSS, and DaisyUI using Vite

vueJs
tailwindcss
daisyui
vite

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