DEV Community

loading...
Cover image for Vite 2.x + Vue 3.x + Tailwind 2.x (starter template)

Vite 2.x + Vue 3.x + Tailwind 2.x (starter template)

web2033 profile image Eugene Kopich Updated on ・2 min read

Repo => vite-vue3-tailwind-starter


Vite 2.x + Vue 3.x + Tailwind 2.x starter

Vite, Vue, Tailwind CSS

This starter template also includes:

  • Vue Router 4.x
  • Inter var font (self-hosted, woff2, v3.17, with 'preload' attr, check out index.html)
  • Just-in-Time mode by default introduced in Tailwind CSS v2.1 (in preview!)
  • 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

First-party plugins needed for Tailwind UI:

Getting Started 🚀

npm:

npm install
npm run dev
npm run build
npm run serve
Enter fullscreen mode Exit fullscreen mode

yarn:

yarn
yarn dev
yarn build
yarn serve
Enter fullscreen mode Exit fullscreen mode

Deploy to Netlify

Bonus links

  • vue-tailwindcss-cdn (a single HTML file with CDN links)
  • CodePen Template with a similar stack (Vue 3.x + Tailwind 2.x + Inter var font)
  • base.css (base styles for Tailwind CSS and other projects as an NPM package)
  • Pinia - state-management alternative to Vuex 4 with a similar to upcoming Vuex 5 API
  • VueUse - collection of essential Vue Composition Utilities

Repo => vite-vue3-tailwind-starter

Discussion (0)

pic
Editor guide