Create a Custom Component Library with Vue & Tailwind CSS
summary
Builds a small Florida-themed component library using Vue CLI and Tailwind CSS via PostCSS, creates a components folder with an index export, implements a reusable button styled with utility classes, hover/active states and dark mode via the dark: prefix, adds props for full width, compiles a dist with main/module and styles.css, publishes to NPM as Florida components, and demonstrates installing it in a demo app (initially missing Vue.use then works).
AI-written summary · about
chapters (11)
- 0:00Custom Component Libraries with Vue and Tailwind
- 1:23Component Libraries
- 2:10Step 1: Generate a Vue application
- 3:11Step 2: Install Tailwind CSS
- 7:06Step 3: Build your First Component
- 11:45Step 4: Register Components
- 12:27Step 5: Configure Package.json
- 15:16Publish to NPM
- 16:33In action
- 20:06Other things to consider
- 21:34Q&A
related talks
32mCreate a Component Library With Vite, Vue and Tailwind
25mRapid development with Vue.js and Tailwind
07mBuild Your Own Component Library, With `Shadcn-vue`
18mCreating a highly reusable VueJS Component library and publishing on NPM using @vue/cli 3.0
19mTangled in Tailwind: A love-hate story
59mBuilding beautiful Blazor apps with Tailwind CSS
09mLeveraging Ark UI Vue, Build your Own Component Library
45mInside Vue Components