Colonia Project

Stack

• Vue 3
• Vuex 4
• Vue Router 4.x
• Inter var font (self-hosted, woff2, v3.19, 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:

• tailwindcss/forms
• tailwindcss/typography
• tailwindcss/line-clamp
• tailwindcss/aspect-ratio

Staging

• Site URL: https://eb-staging-4239d.web.app/
• Build from develop

Development 🚀

yarn install
yarn dev

Note: if you can't run it (see some errors), then try this command npx webpack then try again.

Production Build 🚀🚀

yarn build

Bonus links

• Enabling https on localhost (dev notes)
• Vite dev server with netlify dev support (dev notes)
• 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