Vue Tailwind - Fully customizable Vue Components optimized for Tailwind CSS
A set of fully customizable Vue 2 components designed to be styled with Tailwind CSS utility classes, featuring unlimited variants, configurable props, and a theming system for building consistent design systems.
Define custom default CSS classes for every component to match your unique design.
Create as many style variants as you need for every specific use case.
Override default prop values globally so you never repeat the same settings.
Install the same component multiple times with different names and default settings.
Completely open source under the MIT license for personal and commercial use.
Import only the components you need to keep your production bundle size small.
Customizable Vue components with unlimited variants for Tailwind CSS projects
Vue Tailwind provides a collection of Vue 2 UI components that are designed from the ground up to be styled using Tailwind CSS utility classes. Rather than shipping with opinionated, locked-in styles, every component lets you define your own default classes, create unlimited style variants, and override prop defaults at the global level. This makes it a strong fit for teams who want the convenience of a component library without sacrificing control over their design system. The library is written in TypeScript and supports tree-shaking, so you can import only the components your project actually needs.
What's included
- Form components including text inputs, textareas, selects, checkboxes, radio buttons, and toggles
- A fully featured datepicker component with localization support
- Modal and dialog components with configurable behavior like escape-to-close
- Dropdown and rich select components for advanced selection patterns
- Alert and notification components with variant-based styling
- Table component with built-in pagination support
- Tag component that can render as any HTML element for flexible typography and links
- Button component with submit and button type presets
Ideal for
- Custom-branded Vue 2 applications that need consistent, reusable UI components
- Teams building internal tools or dashboards who want full control over component styling
- Projects that already use Tailwind CSS and need form-heavy interfaces
- Developers who want to define multiple component versions with different default configurations
- Design systems where every variant needs to be explicitly defined and maintained
Customization
The theming system revolves around three core concepts: classes, fixedClasses, and variants. Fixed classes persist across all states while the active variant swaps in its own set of classes. You can register the same underlying component multiple times under different names, each with its own default props and styling — useful for creating semantic wrappers like a submit button or a styled heading without writing new components. The variant prop also accepts an object for conditional styling, letting you toggle between error, success, or other states based on your application logic.
Good to know
- This library targets Vue 2 only; Vue 3 support was planned for a v3 release but the repository has not been updated since early 2023
- The default theme depends on the
@tailwindcss/formsplugin, though all classes are fully replaceable - Licensed under MIT for both personal and commercial use
