Vue-Tailwind is a library of Vue 2 components designed to be highly customizable with Tailwind CSS classes. Unlike traditional UI libraries that provide opinionated styles, Vue-Tailwind allows developers to define their components' look and feel by providing custom default CSS classes, adding unlimited variants, and overriding default prop values. This approach aims to provide the best of both worlds: pre-built complex components (like modals, date pickers) while retaining full control over styling via a utility-first CSS framework. The current stable version is 2.5.1, and its release cadence appears moderate based on the provided release notes, focusing on fixes and feature additions for existing components. Its key differentiator is the deep integration with Tailwind CSS for granular styling control, making it suitable for projects with custom designs that still want component abstractions.
npm install vue-tailwindVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates the installation of `vue-tailwind` and how to register and globally configure specific components like TInput, TButton, and TCard with custom Tailwind CSS classes and default props, then renders them in a basic Vue application.
Consider migrating your project to Vue 3. If staying on Vue 2, be aware of potential security vulnerabilities and lack of support. Explore `vue-tailwind-next` (if available) or similar libraries built for Vue 3.
Install `@tailwindcss/forms` (`npm install -D @tailwindcss/forms`) and add it to your `tailwind.config.js` plugins array: `plugins: [require('@tailwindcss/forms')]`.Add the following to your `tailwind.config.js`: `variants: { extend: { opacity: ['disabled'], cursor: ['disabled'], }, }`When using `Vue.use(VueTailwind, settings)`, ensure that each component you intend to use has a `props.classes` entry with your desired Tailwind CSS utility classes. Utilize `variants` for different states or scenarios.
Ensure `npm install -D @tailwindcss/forms` has been run and `require('@tailwindcss/forms')` is present in the `plugins` array of your `tailwind.config.js`.Verify Tailwind CSS is correctly set up. Install `@tailwindcss/forms` and ensure `tailwind.config.js` includes it in `plugins` and extends `variants` for `disabled` states as described in the documentation.
Check your `main.js` or equivalent entry file. Ensure you are importing `VueTailwind` and the specific components (e.g., `TInput`) and passing them to `Vue.use(VueTailwind, settings)` in the correct `settings` object structure.