Chazzer
Migration Issue with Nuxt UI 3 and Tailwind Resolution
Find the issue problem came from "@calcom/atoms": "^1.0.94", which internally uses Tailwind CSS v3.
what i think is that the internal Tailwind Vite integration within @nuxt/ui-pro seems unable to reliably resolve the core tailwindcss v4 package path in complex build environments (potentially due to plugin interactions or the presence of dependencies using different Tailwind versions like v3), unless tailwindcss is declared as a direct project dependency.
12 replies
Migration Issue with Nuxt UI 3 and Tailwind Resolution
and nuxt.config.ts
import veauryVitePlugins from 'veaury/vite/index.js'
export default defineNuxtConfig({
modules: [
'@nuxt/eslint',
'@nuxt/image',
'@nuxt/ui-pro',
'@nuxt/content',
'@nuxt/fonts',
'@nuxtjs/i18n'
],
devtools: {
enabled: true
},
css: ['~/assets/css/main.css'],
mdc: {
highlight: {
noApiRoute: false
}
},
colorMode: {
preference: 'light'
},
runtimeConfig: {
sitePassword: process.env.SITE_PASSWORD,
public: {
siteAuthEnabled: process.env.SITE_AUTH_ENABLED === 'true'
}
},
devServer: {
port: 3001
},
future: {
compatibilityVersion: 4
},
compatibilityDate: '2025-01-15',
vite: {
plugins: [
veauryVitePlugins({
type: 'vue',
isNuxt: true
})
]
},
eslint: {
config: {
stylistic: {
commaDangle: 'never',
braceStyle: '1tbs'
}
}
},
nitro: {
prerender: {
routes: [
'/'
],
}
},
i18n: {
locales: [
{ code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },
{ code: 'fr', name: 'Français', language: 'fr-FR', dir: 'ltr' },
{ code: 'ar', name: 'العربية', language: 'ar-AR', dir: 'rtl' }
],
strategy: 'prefix_except_default',
defaultLocale: 'en',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'all'
}
}
})
12 replies
Migration Issue with Nuxt UI 3 and Tailwind Resolution
Yes that's what i thought
here is my package.json
{
"name": "nuxt-ui-pro-template-landing",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint": "eslint .",
"typecheck": "nuxt typecheck"
},
"dependencies": {
"@calcom/atoms": "^1.0.94",
"@iconify-json/heroicons": "^1.2.2",
"@iconify-json/material-symbols": "^1.2.17",
"@iconify-json/simple-icons": "^1.2.29",
"@nuxt/content": "^3.4.0",
"@nuxt/fonts": "^0.11.0",
"@nuxt/image": "^1.10.0",
"@nuxt/ui-pro": "^3.0.1",
"@nuxtjs/i18n": "9.3.3",
"@react-spring/three": "^9.7.5",
"@react-three/fiber": "^9.1.0",
"@shadergradient/react": "^2.0.24",
"@vitejs/plugin-react": "^4.3.4",
"@vueuse/motion": "^3.0.3",
"axios": "^1.8.4",
"hammerjs": "^2.0.8",
"nuxt": "^3.16.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwindcss": "^4.0.15",
"three": "^0.174.0",
"veaury": "^2.6.2"
},
"devDependencies": {
"@nuxt/eslint": "^1.2.0",
"@types/hammerjs": "^2.0.46",
"eslint": "^9.22.0",
"typescript": "^5.8.2",
"vue-tsc": "^2.2.0"
},
"resolutions": {
"unimport": "4.1.1",
"vue-tsc": "2.2.0"
},
"pnpm": {
"onlyBuiltDependencies": [
"better-sqlite3"
]
},
"packageManager": "[email protected]"
}12 replies
Need Help with Nuxt Content and Styled Text in YAML
Thanks for the answer, how would you do it for the index.yml of the SaaS template ?
https://github.com/nuxt-ui-pro/saas/blob/main/content/0.index.yml
the goal here is to maintain a clear text for translation later in multiple language
5 replies