Tailwind 4 support ?

[challapradyumna]

Many major libraries have already started shipping beta/alpha version with tailwind 4 support. NuxtUI, DaisyUI. Is there any work going on to support Tailwind 4 soon? Asking especially for the formkit/nuxt.

[Nielssie]

What is your 'problem'?
mine is that tailwind 4 doesn't support tailwind.config.js anymore.
So this doesn't work:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app.vue",
    "./formkit.theme.ts" // <-- add your theme file
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

I am not sure how to add the formkit.theme.ts to tailwind 4.

tailwind4/vuejs/vite

[fenilli]

for now it seens to be done like this: https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file

[vivgui]

Here's what I did to get it working:

Install dependencies

npm install @formkit/core @formkit/icons @formkit/themes @formkit/vue

Generate Formkit Theme file (formkit.theme.{ts|js})

npx formkit@latest theme

Now in your formkit.config.ts file, should look similar to this:

import { genesisIcons } from '@formkit/icons';
import { defaultConfig } from '@formkit/vue';
import { rootClasses } from './formkit.theme';

export default defaultConfig({
    config: {
        rootClasses,
    },
    icons: {
        ...genesisIcons,
    },
});

And in you app.css or whatever your CSS entry point is, should look similar to this:

@import 'tailwindcss';

@plugin '@formkit/themes/tailwindcss';
@source '../../formkit.theme.ts';

[fraaalk]

can you share your package.json? Working with a resolution to enforce tw4?

[vivgui]

Sure! But FYI, my app is a Laravel and Vite project.

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "build:ssr": "vite build && vite build --ssr",
        "dev": "vite",
        "format": "prettier --write resources/",
        "format:check": "prettier --check resources/",
        "lint": "eslint . --fix"
    },
    "devDependencies": {
        "@eslint/js": "^9.21.0",
        "@types/node": "^22.13.9",
        "@vue/eslint-config-typescript": "^14.5.0",
        "eslint": "^9.21.0",
        "eslint-config-prettier": "^10.1.1",
        "eslint-plugin-vue": "^10.0.0",
        "prettier": "^3.5.3",
        "prettier-plugin-organize-imports": "^4.1.0",
        "prettier-plugin-tailwindcss": "^0.6.11",
        "typescript-eslint": "^8.26.0",
        "vue-tsc": "^2.2.8"
    },
    "dependencies": {
        "@formkit/core": "^1.6.9",
        "@formkit/icons": "^1.6.9",
        "@formkit/pro": "^0.127.21",
        "@formkit/themes": "^1.6.9",
        "@formkit/vue": "^1.6.9",
        "@headlessui/vue": "^1.7.23",
        "@inertiajs/vue3": "^2.0.8",
        "@prettier/plugin-php": "^0.22.4",
        "@tailwindcss/forms": "^0.5.10",
        "@tailwindcss/vite": "^4.0.12",
        "@types/lodash": "^4.17.16",
        "@types/ziggy-js": "^1.8.0",
        "@vitejs/plugin-vue": "^5.2.1",
        "@vueuse/core": "^12.8.2",
        "autoprefixer": "^10.4.20",
        "axios": "^1.8.2",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "concurrently": "^9.1.2",
        "laravel-vite-plugin": "^1.2.0",
        "lucide": "^0.479.0",
        "lucide-vue-next": "^0.479.0",
        "radix-vue": "^1.9.17",
        "reka-ui": "^2.1.0",
        "tailwind-merge": "^3.0.2",
        "tailwindcss": "^4.0.12",
        "tailwindcss-animate": "^1.0.7",
        "typescript": "^5.8.2",
        "vite": "^6.2.1",
        "vite-plugin-run": "^0.6.1",
        "vue": "^3.5.13",
        "ziggy-js": "^2.5.2"
    }
}

[gilesbutler]

If it helps, I ran npm install tailwindcss @tailwindcss/vite first then npm i @formkit/themes -f afterwords. Using the force argument ignored all the dependency errors from @formkit/themes and the install worked.