Tailwind V4 Compatibility

[carlosvaldesweb]

Clear and concise description of the problem

Hi there,

I’ve been trying to integrate Konsta UI with Tailwind 4 in my Nuxt project, but I haven’t been able to get it working properly. Could you please confirm if Konsta UI is compatible with Tailwind 4?

If it’s not currently supported, would it be possible to add compatibility in the future? It would be a great addition, as I’d love to use both libraries together in my project.

Thanks in advance for your help!

Suggested solution

Migrate to tailwind 4

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[carlosvaldesweb]

tailwind.config.js I've tried set content in empty array

// import konstaConfig config
const konstaConfig = require("konsta/config");

// wrap config with konstaConfig config
const config = konstaConfig({
  content: [
    "./components/*.{js,ts,jsx,vue}",
    "./pages/*.{js,ts,jsx,vue}",
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
    "./node_modules/konsta/**/*.{vue,js,ts}",
  ],
  // darkMode: 'class', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
});
module.exports = config;

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxt/eslint"],

  build: {
    transpile: ["konsta"],
  },
  css: ["@/assets/css/main.css"],
  postcss: {
    plugins: {
      "@tailwindcss/postcss": {},
      autoprefixer: {},
    },
  },

  compatibilityDate: "2025-04-27",
});

main.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import "tailwindcss";

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/eslint": "^1.3.0",
    "@tailwindcss/postcss": "^4.1.4",
    "@tailwindcss/vite": "^4.1.4",
    "eslint": "^9.25.1",
    "konsta": "^4.0.1",
    "nuxt": "^3.16.2",
    "typescript": "^5.8.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.3",
    "sass": "^1.87.0",
    "tailwindcss": "^4.1.4"
  }
}

[jjkavalam]

I really wanted to use Konsta UI for my project because of its simplicity and well organised documentation.

But i was stuck after running into this issue. Even tried to base Konsta code on Tailwind V4 and realised that it might amount to a total rewrite of the src/config.

Basically, what i understand is that all of the "plugin" code that is in javascript would need to become css directives.

Really appreciate if someone knowledgeable in the area could take a look 🙏

(For my project, i will downgrade tailwind to v3 so as to use Konsta)

[jkhaui]

Today is Christmas for us all 😀🙏