tailwind classes defined in formkit.config.js are not read

Question

I have a vuejs project, started with vite and successfully added both tailwindcss and formkitto it.

Whilst inline styling of formKit classes with tailwindcss works and defining classes in main.js also works, I stumble upon inserting the classes in the formkit.config.js file (where I ideally want to group them).

Here's what I do (following the documentation):

// tailwind.config.js

/** @type {import('tailwindcss').Config} */

const formKitTailwind = require ("@formkit/themes/tailwindcss");

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./formkit.config.js" // the path is correct
  ],
  theme: {
      // cut for brievity
  },
  plugins: [formKitTailwind]
};

Then, formkit.config.jscontains:

//formkit.config.js

import { generateClasses } from '@formkit/themes'

export default {
  config: {
    classes: generateClasses({
      text: {
        // these classes were tested inline and in main.js
        label: 'text-blue-500',
        input:'text-pink-600 w-full my-2 p-2 align-middle'
      }
    })
  }
}

And main.js

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import './style.css'
import router from './router'
import { fr } from '@formkit/i18n'

createApp(App)
.use(
  plugin, 
  defaultConfig({
    locales:{ fr },
    locale: 'fr',
    messages:{
      fr:{
        ui:{
          submit: 'envoyer'
        }
      }
    }
  })
)
.use(router)
.mount('#app')

I get no error messages. But the classes don't show in the html of the form.

Answer 1

You need to import your FormKit config from formkit.config.js and use it in your main.js. Right now you're defining it in formkit.config.js but then using a custom inline config in main.js.

You want Something like this:

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import './style.css'
import router from './router'
import myConfig from './formkit.config.js'

createApp(App)
.use(
  plugin, 
  defaultConfig(myConfig)
)
.use(router)

You'll want to combine the inline config options you have in main.js currently with your imported config so that you don't lose any of your settings.

//formkit.config.js
import { fr } from '@formkit/i18n'
import { generateClasses } from '@formkit/themes'

export default {
  locales:{ fr },
  locale: 'fr',
  messages:{
    fr:{
      ui:{
        submit: 'envoyer'
      }
    }
  },
  config: {
    classes: generateClasses({
      text: {
        label: 'text-blue-500',
        input:'text-pink-600 w-full my-2 p-2 align-middle'
      }
    })
  }
}