fix(module): handle tailwindcss import without theme(static)

[sandros94]

🔗 Linked issue

Reference #3374, 85b45f6

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Since Tailwindcss 4.0.8 it has been required to add theme(static) to all the tailwinds imports. The underline issue is that in the color's plugin we are not able to inform tailwind which color are being added in the page head.

The solution I came with is to take advantage of var() fallback and populate it directly with upstream's oklch string. The final output allows to both override the color with the local assets/css/main.css as well as safely fallback to an empty string if an unsupported color is provided.

The final style output looks something like:

:root {
  --ui-color-primary-50: var(--color-green-50, oklch(0.982 0.018 155.826));
  --ui-color-primary-100: var(--color-green-100, oklch(0.962 0.044 156.743));
  --ui-color-primary-200: var(--color-green-200, oklch(0.925 0.084 155.995));
// ....
  --ui-color-neutral-900: var(--color-slate-900, oklch(0.208 0.042 265.755));
  --ui-color-neutral-950: var(--color-slate-950, oklch(0.129 0.042 264.695));
}

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@3630

commit: 465d78d

[nuxthub-admin]

✅ Deployed ui3

Deployed ui3 465d78d to preview

🔗	fix-theme-static.ui-6q2.pages.dev
📌	8a271683.ui-6q2.pages.dev
📱	View QR Code

📋 View deployment logs

[benjamincanac]

Awesome work @sandros94! Thanks a lot ♥️