Vue Tailwind Components

Common errors

• TypeError: Cannot read properties of undefined (reading 'forms')

  cause The `@tailwindcss/forms` plugin is not correctly installed or registered in `tailwind.config.js`.
  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`.

• Component is not properly styled or looks broken (e.g., TInput, TCheckbox)

  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.
  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.

• [Vue warn]: Unknown custom element: <t-input> - did you register the component correctly?

  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.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  Fix: Install `@tailwindcss/forms` (`npm install -D @tailwindcss/forms`) and add it to your `tailwind.config.js` plugins array: `plugins: [require('@tailwindcss/forms')]`.
• gotcha 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.
  Fix: Add the following to your `tailwind.config.js`: `variants: { extend: { opacity: ['disabled'], cursor: ['disabled'], }, }`
• gotcha 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.
  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.

Install

• npm install vue-tailwind npm
• yarn add vue-tailwind yarn
• pnpm add vue-tailwind pnpm

Imports

• VueTailwind
  wrong:

  const VueTailwind = require('vue-tailwind')

  correct:

  import VueTailwind from 'vue-tailwind'

  Main plugin for global installation in Vue. This package is intended for ES module usage; CommonJS `require` is not the recommended or idiomatic approach.
• TInput
  wrong:

  import TInput from 'vue-tailwind/dist/components'

  correct:

  import { TInput } from 'vue-tailwind/dist/components'

  Individual components are named exports from the `dist/components` path. Attempting a default import will fail.
• TDatepicker
  wrong:

  import { TDatepicker } from 'vue-tailwind'

  correct:

  import { TDatepicker } from 'vue-tailwind/dist/components'

  Ensure components are imported from the specific `dist/components` subpath, not the root package directly.

Quickstart

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.

import Vue from 'vue';
import VueTailwind from 'vue-tailwind';
import {
  TInput,
  TButton,
  TCard
} from 'vue-tailwind/dist/components';

// Define custom settings for the components
const settings = {
  't-input': {
    component: TInput,
    props: {
      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',
      placeholder: 'Enter text here...'
    }
  },
  't-button': {
    component: TButton,
    props: {
      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'
    }
  },
  't-card': {
    component: TCard,
    props: {
      classes: 'bg-white shadow-lg rounded-lg p-6'
    }
  }
};

Vue.use(VueTailwind, settings);

// Example Vue instance (in a .vue file or main.js)
new Vue({
  el: '#app',
  template: `
    <div id="app" class="p-8">
      <t-card class="mb-4">
        <h2 class="text-xl font-semibold mb-2">My Card Title</h2>
        <t-input class="mb-2" />
        <t-button>Submit</t-button>
      </t-card>
      <t-button>Another Button</t-button>
    </div>
  `
});