Setup

Update the vueform.config.js and include tailwind theme:

js
// vueform.config.js

import tailwind from '@vueform/vueform/themes/tailwind'

export default {
  theme: tailwind,
  // ...
}

Tailwind 2.x

Update tailwind.config.js with the following:

js
// tailwind.config.js

module.exports = {
  purge: {
    // ...
    content: [
      // ... your existing files
      './vueform.config.js', // or where `vueform.config.js` is located
      './node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
      './node_modules/@vueform/vueform/themes/tailwind/**/*.js',
    ]
  },
  // ...
  plugins: [
    require('@vueform/vueform/tailwind')
  ]
}

Tailwind 3.x

Update tailwind.config.js with the following:

js
// tailwind.config.js

module.exports = {
  content: [
    // ... your existing files
    './vueform.config.js', // or where `vueform.config.js` is located
    './node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
    './node_modules/@vueform/vueform/themes/tailwind/**/*.js',
  ],
  // ...
  plugins: [
    require('@vueform/vueform/tailwind')
  ]
}

Prefix

If you are using prefixes head to Tailwind Prefix section for instructions.

Customization

The theme can be customized with the following variables in tailwind.config.js and later on with CSS vars:

js
// tailwind.config.js

module.exports = {
  // ...
  extend: {
    form: (theme) => ({
      primary: '#07bf9b',
      primaryDarker: '#06ac8b', // defaults to 10% darker primary

      danger: theme('colors.red.500'),
      dangerLighter: theme('colors.red.100'),

      success: theme('colors.green.500'),
      successLighter: theme('colors.green.100'),

      ringColor: '#07bf9b66, // defaults to primary with `ringOpacity` alpha
      ringWidth: theme('ringWidth.2'),
      ringOpacity: 0.4,

      grays: theme('colors.gray'),

      fontSize: {
        base: theme('fontSize.base'),
        sm: theme('fontSize.sm'),
        lg: theme('fontSize.base'),
      },

      smallFontSize: {
        base: theme('fontSize.sm'),
        sm: theme('fontSize')['0.5sm'],
        lg: theme('fontSize.sm'),
      },

      lineHeight: {
        base: theme('fontSize.base')[1].lineHeight,
        sm: theme('fontSize.sm')[1].lineHeight,
        lg: theme('fontSize.base')[1].lineHeight,
      },

      smallLineHeight: {
        base: theme('fontSize.sm')[1].lineHeight,
        sm: theme('fontSize')['0.5sm'][1].lineHeight,
        lg: theme('fontSize.sm')[1].lineHeight,
      },

      letterSpacing: {
        base: 0,
        sm: 0,
        lg: 0,
      },

      smallLetterSpacing: {
        base: 0,
        sm: 0,
        lg: 0,
      },

      gutter: {
        base: theme('width')['4'],
        sm: theme('width')['2'],
        lg: theme('width')['4'],
      },

      inputMinHeight: {
        base: theme('height')['9.5'],
        sm: theme('height')['8.5'],
        lg: theme('height')['11.5'],
      },

      inputPy: {
        base: theme('padding')['1.5'],
        sm: theme('padding')['1.5'],
        lg: theme('padding')['2.5'],
      },

      inputPx: {
        base: theme('padding')['3'],
        sm: theme('padding')['2'],
        lg: theme('padding')['3.5'],
      },

      btnPy: {
        base: theme('padding')['1.5'],
        sm: theme('padding')['1.5'],
        lg: theme('padding')['2.5'],
      },

      btnPx: {
        base: theme('padding')['3.5'],
        sm: theme('padding')['3'],
        lg: theme('padding')['5'],
      },

      btnSmallPy: {
        base: theme('padding')['1'],
        sm: theme('padding')['1'],
        lg: theme('padding')['1.5'],
      },

      btnSmallPx: {
        base: theme('padding')['2.5'],
        sm: theme('padding')['2.5'],
        lg: theme('padding')['3'],
      },

      tagPy: {
        base: '0px',
        sm: 'var(--vf-py-tag)',
        lg: 'var(--vf-py-tag)',
      },

      tagPx: {
        base: theme('padding')['1.75'],
        sm: 'var(--vf-px-tag)',
        lg: 'var(--vf-px-tag)',
      },

      groupTabsPy: {
        base: 'var(--vf-py-input)',
        sm: 'var(--vf-py-input-sm)',
        lg: 'var(--vf-py-input-lg)',
      },

      groupTabsPx: {
        base: 'var(--vf-px-input)',
        sm: 'var(--vf-px-input-sm)',
        lg: 'var(--vf-px-input-lg)',
      },

      groupBlocksPy: {
        base: theme('padding')['3'],
        sm: theme('padding')['2.5'],
        lg: theme('padding')['3.5'],
      },

      groupBlocksPx: {
        base: theme('padding')['4'],
        sm: theme('padding')['4'],
        lg: theme('padding')['4'],
      },

      sliderTooltipPy: {
        base: theme('padding')['0.5'],
        sm: theme('padding')['0.25'],
        lg: theme('padding')['0.75'],
      },

      sliderTooltipPx: {
        base: theme('padding')['1.5'],
        sm: theme('padding')['1.25'],
        lg: theme('padding')['2'],
      },

      spaceAddon: {
        base: '0px',
        sm: 'var(--vf-space-addon)',
        lg: 'var(--vf-space-addon)',
      },

      spaceCheckbox: {
        base: theme('padding')['1.5'],
        sm: 'var(--vf-space-checkbox)',
        lg: 'var(--vf-space-checkbox)',
      },

      spaceTags: {
        base: theme('padding')['1'],
        sm: 'var(--vf-space-tags)',
        lg: 'var(--vf-space-tags)',
      },

      floatingTop: {
        base: '0px',
        sm: '0px',
        lg: theme('padding')['2.75'],
      },
      
      borderWidths: { // can be array
        input: theme('borderWidth.DEFAULT'), 
        dropdown: [
          'var(--vf-border-width-input-t)',
          'var(--vf-border-width-input-r)',
          'var(--vf-border-width-input-b)',
          'var(--vf-border-width-input-l)'
        ],
        checkbox: [
          'var(--vf-border-width-input-t)',
          'var(--vf-border-width-input-r)',
          'var(--vf-border-width-input-b)',
          'var(--vf-border-width-input-l)',
        ],
        radio: [
          'var(--vf-border-width-input-t)',
          'var(--vf-border-width-input-r)',
          'var(--vf-border-width-input-b)',
          'var(--vf-border-width-input-l)',
        ],
        btn: [
          'var(--vf-border-width-input-t)',
          'var(--vf-border-width-input-r)',
          'var(--vf-border-width-input-b)',
          'var(--vf-border-width-input-l)',
        ],
        toggle: theme('width')['0.5'], 
        tag: '1px',
      },
      
      inputRadius: { // can be array
        base: theme('borderRadius.DEFAULT'),
        sm: 'var(--vf-radius-input)',
        lg: 'var(--vf-radius-input)',
      },
      
      btnRadius: {  // can be array
        base: 'var(--vf-radius-input)',
        sm: 'var(--vf-radius-input-sm)',
        lg: 'var(--vf-radius-input-lg)',
      },
      
      smallRadius: {  // can be array, applies to: checkbox, tags, slider tooltips
        base: 'var(--vf-radius-input)',
        sm: 'var(--vf-radius-input-sm)',
        lg: 'var(--vf-radius-input-lg)',
      },
      
      largeRadius: { //  // can be array, applies to: drag and drop, checkbox & radio group blocks, textarea, native multiselect
        base: 'var(--vf-radius-input)',
        sm: 'var(--vf-radius-input-sm)',
        lg: 'var(--vf-radius-input-lg)',
      },
      
      tagRadius: {
        base: 'var(--vf-radius-input)',
        sm: 'var(--vf-radius-input-sm)',
        lg: 'var(--vf-radius-input-lg)',
      },
      
      checkboxRadius: { // can be array
        base: 'var(--vf-radius-input)',
        sm: 'var(--vf-radius-input-sm)',
        lg: 'var(--vf-radius-input-lg)',
      },
      
      sliderRadius: { // can be array
        base: 'var(--vf-radius-input)',
        sm: 'var(--vf-radius-input-sm)',
        lg: 'var(--vf-radius-input-lg)',
      },
      
      imageRadius: { // can be array
        base: 'var(--vf-radius-input)',
        sm: 'var(--vf-radius-input-sm)',
        lg: 'var(--vf-radius-input-lg)',
      },
      
      galleryRadius: { // can be array
        base: 'var(--vf-radius-input)',
        sm: 'var(--vf-radius-input-sm)',
        lg: 'var(--vf-radius-input-lg)',
      },

      bgColors: {
        input: '#ffffff',
        inputHover: 'var(--vf-bg-input)',
        inputFocus: 'var(--vf-bg-input)',
        inputDanger: 'var(--vf-bg-input)',
        inputSuccess: 'var(--vf-bg-input)',
        disabled: 'var(--vf-gray-200)',
        selected: 'rgba(17,24,39,0.05)', // Option hover, cbgroup blocks selected
        passive: 'var(--vf-gray-300)',
        icon: 'var(--vf-gray-500)',
        danger: 'var(--vf-danger-lighter)',
        success: 'var(--vf-success-lighter)',
        addon: 'transparent',
        tag: 'var(--vf-primary)',
        sliderHandle: 'var(--vf-primary)',
        toggleHandle: '#ffffff',
        dateHead: 'var(--vf-gray-100)',
        btn: 'var(--vf-primary)',
        btnDanger: 'var(--vf-danger)',
        btnSecondary: 'var(--vf-gray-200)',
      },

      textColors: {
        onPrimary: '#ffffff',
        input: 'var(--vf-gray-800)',
        inputHover: 'var(--vf-color-input)',
        inputFocus: 'var(--vf-color-input)',
        inputDanger: 'var(--vf-color-input)',
        inputSuccess: 'var(--vf-color-input)',
        placeholder: 'var(--vf-gray-300)',
        disabled: 'var(--vf-gray-400)',
        passive: 'var(--vf-gray-700)',
        muted: 'var(--vf-gray-500)',
        floating: 'var(--vf-color-muted)',
        floatingSuccess: 'var(--vf-color-floating)',
        floatingDanger: 'var(--vf-color-floating)',
        floatingFocus: 'var(--vf-color-floating)',
        danger: 'var(--vf-danger)',
        success: 'var(--vf-success)',
        addon: 'inherit',
        tag: 'var(--vf-color-on-primary)',
        dateHead: 'var(--vf-gray-700)',
        btn: 'var(--vf-color-on-primary)',
        btnDanger: '#ffffff',
        btnSecondary: 'var(--vf-gray-700)',
      },

      borderColors: {
        input: 'var(--vf-gray-300)',
        inputFocus: 'var(--vf-primary)',
        inputHover: 'var(--vf-border-color-input)',
        inputDanger: 'var(--vf-border-color-input)',
        inputSuccess: 'var(--vf-border-color-input)',
        checked: 'var(--vf-primary)', // applies to checkbox & radio
        btn: 'var(--vf-primary)',
        tag: 'var(--vf-primary)',
        sliderTooltip: 'var(--vf-primary)',
        passive: 'var(--vf-gray-300)',
        btnDanger: 'var(--vf-danger)',
        btnSecondary: 'var(--vf-gray-200)',
      },

      shadows: {
        input: '0px 0px 0px 0px rgba(0,0,0,0)',
        inputHover: 'var(--vf-shadow-input)',
        inputFocus: 'var(--vf-shadow-input)',
        handles: '0px 0px 0px 0px rgba(0,0,0,0)',
        handlesHover: 'var(--vf-shadow-input-hover)',
        handlesFocus: 'var(--vf-shadow-input-focus)',
        btn: 'var(--vf-shadow-input)',
        dropdown: 'var(--vf-shadow-input)',
      },

      checkboxSize: {
        base: theme('width')['4'],
        sm: theme('width')['3.5'],
        lg: theme('width')['4'],
      },

      gallerySize: {
        base: theme('width')['24'],
        sm: theme('width')['20'],
        lg: theme('width')['28'],
      },

      toggleWidth: {
        base: theme('width')['12'],
        sm: theme('width')['11'],
        lg: theme('width')['12'],
      },

      toggleHeight: {
        base: theme('height')['5'],
        sm: theme('height')['4.5'],
        lg: theme('height')['5'],
      },

      sliderHeight: {
        base: theme('height')['1.5'],
        sm: theme('height')['1.25'],
        lg: theme('height')['2'],
      },

      sliderHeightVertical: {
        base: theme('height')['80'],
        sm: 'var(--vf-slider-height-vertical)',
        lg: 'var(--vf-slider-height-vertical)',
      },

      sliderHandleSize: {
        base: theme('height')['4'],
        sm: theme('height')['3.5'],
        lg: theme('height')['5'],
      },

      sliderTooltipDistance: {
        base: theme('width')['2'],
        sm: theme('width')['1.5'],
        lg: theme('width')['2'],
      },

      sliderTooltipArrowSize: {
        base: theme('width')['1.25'],
        sm: 'var(--vf-slider-tooltip-arrow-size)',
        lg: 'var(--vf-slider-tooltip-arrow-size)',
      },
    })
  },
}
👋 Hire Vueform team for form customizations and developmentLearn more