Quick Way to Start Project with Vite Vue 3 Headless UI Tailwind CSS

In this tutorial, we will install Vite + Vue 3 + Tailwind CSS (starter).


Vite Vue3 Tailwind CSS Starter Features


Vite

Vue js 3

Tailwind CSS v3.0.2-alpha

Vue Router 4.x

Inter var font (self-hosted, woff2, v3.19, with 'preload' attr, check out index.html)

Headless UI - unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS

Heroicons - beautiful hand-crafted SVG icons, by the makers of Tailwind CSS


Tailwind CSS First-party plugins

tailwindcss/forms

tailwindcss/typography

tailwindcss/line-clamp

tailwindcss/aspect-ratio


Install project

npx degit web2033/vite-vue3-tailwind-starter vvt-app

Move to project directory

cd vvt-app


Install and run node dependency

npm i
npm run dev
npm run build
npm run serve

for yarn

yarn
yarn dev
yarn build
yarn serve

GitHub Link

https://github.com/web2033/vite-vue3-tailwind-starter

Tags: