Use Nuxt with TailwindCSS in formkit.config.ts about formkit

[andrew-boyd]

@bushbill Happy to try to help out. For Nuxt all you need to do is install @formkit/nuxt from npm and in your Nuxt config file add @formkit/nuxt to your modules list.

// nuxt.config
...
modules: [
  '@formkit/nuxt',
],
...

Then, adjacent to your Nuxt config file in your project root create a formkit.config file. It can end in .ts, .mjs or .js depending on your project's needs.

Using the example config file from the documentation (which is only a partial implementation of a Tailwind theme for demonstration purposes) means that your formkit.config file would would look like this:

export default {
  config: {
    rootClasses (sectionKey, node) {
      const type = node.props.type
      const classConfig = {
        outer: 'mb-5',
        legend: 'block mb-1 font-bold',
        label () {
          if (type === 'text') { return 'block mb-1 font-bold' }
          if (type === 'radio') { return 'text-sm text-gray-600 mt-0.5' }
        },
        options () {
          if (type === 'radio') { return 'flex flex-col flex-grow mt-2' }
        },
        input () {
          if (type === 'text') { return 'w-full h-10 px-3 mb-2 text-base text-gray-700 placeholder-gray-400 border rounded-lg focus:shadow-outline' }
          if (type === 'radio') { return 'mr-2' }
        },
        wrapper () {
          if (type === 'radio') { return 'flex flex-row flex-grow' }
        },
        help: 'text-xs text-gray-500',
      }

      function createClassObject (classesArray) {
        const classList = {}
        if (typeof classesArray !== 'string') return classList
        classesArray.split(' ').forEach(className => {
          classList[className] = true
        })
        return classList
      }

      const target = classConfig[sectionKey]
      if (typeof target === 'string') {
        return createClassObject(target)
      } else if (typeof target === 'function') {
        return createClassObject(classConfig[sectionKey]())
      }
    }
  }
}

That should automatically apply some Tailwind classes to every FormKit input in your project, based on the logic represented in the config.

[bushbill]

@andrew-boyd Thank you.

But if I include this config above into formit.config.js I got the following error after running "yarn dev -o":

ERROR  [worker] Cannot read properties of undefined (reading 'split')                                                                                                                                                                                                                                           08:14:52

  at createClassObject (.nuxt/dist/server/server.mjs:11768:22)
  at Proxy.rootClasses (.nuxt/dist/server/server.mjs:11777:16)
  at .nuxt/dist/server/server.mjs:3816:43
  at watch (.nuxt/dist/server/server.mjs:9131:17)
  at Proxy.<anonymous> (.nuxt/dist/server/server.mjs:9046:39)
  at Object.get (.nuxt/dist/server/server.mjs:3814:34)
  at Reflect.get (<anonymous>)
  at Object.get (node_modules/@vue/reactivity/dist/reactivity.cjs.js:428:29)
  at .nuxt/dist/server/server.mjs:2716:33
  at Array.reduce (<anonymous>)


 ERROR  [proxy] connect ENOENT /tmp/nitro/worker-28538-1.sock                                                                                                                                                                                                                                                    08:14:53

  at PipeConnectWrap.afterConnect [as oncomplete] (node:net:1161:16)

What could be wrong?

[justin-schroeder]

@bushbill the code example looks like its missing an undefined check:

Change this:

function createClassObject (classesArray) {
  const classList = {}
  classesArray.split(' ').forEach(className => {
      classList[className] = true
  })
  return classList
}

To this:

function createClassObject (classesArray) {
  const classList = {}
  if (typeof classesArray !== 'string') return classList
  classesArray.split(' ').forEach(className => {
      classList[className] = true
  })
  return classList
}

[andrew-boyd]

Thanks @justin-schroeder — I'll get this updated in the docs examples. Thought we'd already done that but they must not have made it out the door.

[andrew-boyd]

Ah... they were there just cached. I had to do a hard reload on the page in my browser. Sorry for steering you wrong with out of date example code @bushbill!

I've updated my earlier response to include the correct revision.

[justin-schroeder]

Closing since this seems to be resolved — feel free to reopen if there is a bug here