{"id":16578,"library":"vue-tailwind","title":"Vue Tailwind Components","description":"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.","status":"active","version":"2.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/alfonsobries/vue-tailwind","tags":["javascript","tailwindcss","vue","vue-tailwind","vue components","tailwind components","typescript"],"install":[{"cmd":"npm install vue-tailwind","lang":"bash","label":"npm"},{"cmd":"yarn add vue-tailwind","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-tailwind","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for the Vue 2 framework.","package":"vue","optional":false},{"reason":"Plugin for Tailwind CSS, required for the default theme and proper styling of form components like TInput, TCheckbox.","package":"@tailwindcss/forms","optional":true},{"reason":"Primary CSS framework the components are styled with by default; highly recommended for intended usage.","package":"tailwindcss","optional":true}],"imports":[{"note":"Main plugin for global installation in Vue. This package is intended for ES module usage; CommonJS `require` is not the recommended or idiomatic approach.","wrong":"const VueTailwind = require('vue-tailwind')","symbol":"VueTailwind","correct":"import VueTailwind from 'vue-tailwind'"},{"note":"Individual components are named exports from the `dist/components` path. Attempting a default import will fail.","wrong":"import TInput from 'vue-tailwind/dist/components'","symbol":"TInput","correct":"import { TInput } from 'vue-tailwind/dist/components'"},{"note":"Ensure components are imported from the specific `dist/components` subpath, not the root package directly.","wrong":"import { TDatepicker } from 'vue-tailwind'","symbol":"TDatepicker","correct":"import { TDatepicker } from 'vue-tailwind/dist/components'"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueTailwind from 'vue-tailwind';\nimport {\n  TInput,\n  TButton,\n  TCard\n} from 'vue-tailwind/dist/components';\n\n// Define custom settings for the components\nconst settings = {\n  't-input': {\n    component: TInput,\n    props: {\n      classes: 'border-2 border-gray-300 block w-full rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-gray-800',\n      placeholder: 'Enter text here...'\n    }\n  },\n  't-button': {\n    component: TButton,\n    props: {\n      classes: 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'\n    }\n  },\n  't-card': {\n    component: TCard,\n    props: {\n      classes: 'bg-white shadow-lg rounded-lg p-6'\n    }\n  }\n};\n\nVue.use(VueTailwind, settings);\n\n// Example Vue instance (in a .vue file or main.js)\nnew Vue({\n  el: '#app',\n  template: `\n    <div id=\"app\" class=\"p-8\">\n      <t-card class=\"mb-4\">\n        <h2 class=\"text-xl font-semibold mb-2\">My Card Title</h2>\n        <t-input class=\"mb-2\" />\n        <t-button>Submit</t-button>\n      </t-card>\n      <t-button>Another Button</t-button>\n    </div>\n  `\n});","lang":"javascript","description":"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."},"warnings":[{"fix":"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.","message":"Vue 2 End of Life: Vue-Tailwind targets Vue 2. The Vue 2 ecosystem officially reached End of Life (EOL) on December 31, 2023. While Vue-Tailwind itself might continue to function, there will be no further official updates, security patches, or support for Vue 2 from the Vue core team. Projects using Vue 2 and related libraries should plan for migration to Vue 3.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Install `@tailwindcss/forms` (`npm install -D @tailwindcss/forms`) and add it to your `tailwind.config.js` plugins array: `plugins: [require('@tailwindcss/forms')]`.","message":"Required Tailwind CSS Plugins: The default themes for many Vue-Tailwind components rely on the `@tailwindcss/forms` plugin. Without this plugin, form elements like inputs, checkboxes, and radio buttons may not render correctly or appear unstyled.","severity":"gotcha","affected_versions":">=0.4.1"},{"fix":"Add the following to your `tailwind.config.js`: `variants: { extend: { opacity: ['disabled'], cursor: ['disabled'], }, }`","message":"Missing Tailwind CSS 'disabled' Variants: To fully support the default styling of disabled states for interactive components (e.g., `disabled:opacity-50`), Tailwind CSS needs to be configured to extend variants for the `disabled` pseudo-class.","severity":"gotcha","affected_versions":">=0.4.1"},{"fix":"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.","message":"Component-specific Class Overrides: Vue-Tailwind's strength is its configurability. However, failing to provide specific `classes` or `variants` in the global configuration for components means they will either revert to a basic unstyled state or use very minimal defaults, which might not match expectations.","severity":"gotcha","affected_versions":">=0.4.1"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `npm install -D @tailwindcss/forms` has been run and `require('@tailwindcss/forms')` is present in the `plugins` array of your `tailwind.config.js`.","cause":"The `@tailwindcss/forms` plugin is not correctly installed or registered in `tailwind.config.js`.","error":"TypeError: Cannot read properties of undefined (reading 'forms')"},{"fix":"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.","cause":"This often occurs because Tailwind CSS or its necessary plugins (`@tailwindcss/forms`) are not installed, or the Tailwind configuration for `disabled` variants is missing.","error":"Component is not properly styled or looks broken (e.g., TInput, TCheckbox)"},{"fix":"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.","cause":"The Vue-Tailwind components were not globally registered via `Vue.use(VueTailwind, components)` or the `components` object passed during registration did not include the component.","error":"[Vue warn]: Unknown custom element: <t-input> - did you register the component correctly?"}],"ecosystem":"npm"}