@formkit/tailwindcss NPM

1.6.2 • Published 27 days ago

Weekly downloads

Last release

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

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

7 months ago

9 months ago

8 months ago

7 months ago

6 months ago

8 months ago

8 months ago

6 months ago

8 months ago

7 months ago

6 months ago

10 months ago

7 months ago

9 months ago

5 months ago

8 months ago

5 months ago

6 months ago

7 months ago

8 months ago

8 months ago

7 months ago

8 months ago

6 months ago

10 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

9 months ago

8 months ago

10 months ago

8 months ago

7 months ago

9 months ago

10 months ago

10 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

9 months ago

7 months ago

7 months ago

9 months ago

9 months ago

8 months ago

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

8 months ago

9 months ago

7 months ago

8 months ago

7 months ago

6 months ago

7 months ago

8 months ago

10 months ago

8 months ago

6 months ago

7 months ago

8 months ago

10 months ago

6 months ago

10 months ago

8 months ago

7 months ago

9 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

8 months ago

9 months ago

9 months ago

7 months ago

10 months ago

9 months ago

7 months ago

6 months ago

10 months ago

10 months ago

11 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

11 months ago