vueJs
tailwindcss
daisyui
vite
Install vue
- Install vuejs terminal or console
Select your preferences Package name: ...npm create vue@latest ./
- √ 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
- install node module terminal or console
npm i
- Run server terminal or console
npm run dev
- install tailwindcssterminal or console
additional tailwind pluginnpm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
terminal or console
install daisyuinpm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio
terminal or consolenpm i daisyui
- 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], };
main.css
as this is already imported inside main.js
. Comment everything inside main.css
& then paste the following tailwind directiveMust comment out everything inside
main.css
main.css
/* src/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;