@formkit/tailwindcss

This package contains tooling to assist with building a comprehensive Tailwind theme for FormKit.

Installation

npm install @formkit/tailwindcss

// tailwind.config.js
module.exports {
  ...
  plugins: [
    require('@formkit/tailwindcss')
  ]
  ...
}

// app.js (or your main entry file)
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import { generateClasses } from '@formkit/tailwindcss'
import './index.css' // wherever your Tailwind styles exist

createApp(App)
  .use(
    plugin,
    defaultConfig({
      config: {
        classes: generateClasses({
          // Your theme will go here.
          // ...
          // text: {
          //   label: 'font-bold text-gray-300 formkit-invalid:text-red-500',
          //   ...
          // }
          // ...
        }),
      },
    })
  )
  .mount('#app')

Variants

The @formkit/tailwindcss package provides a number of variants you can use in your class lists to dynamically respond to input and form state.

The currently provided variants are:

• formkit-disabled:
• formkit-invalid:
• formkit-errors:
• formkit-complete:
• formkit-loading:
• formkit-submitted:
• formkit-multiple:
• formkit-action:
• formkit-message-validation:
• formkit-message-error:

Guide

For a walkthrough on creating a full Tailwind theme for FormKit read the guide on the official FormKit.com docs.