Use tailwind.config.js instead of CSS config in Nuxt UI v4?

🖼️ui

nuxt3

I have an existing project with latest Nuxt v3.20.2, which is using nuxt/tailwind already.

The config is done in tailwind.config.js

So far,

@apply

@apply

@apply

@apply works in imported

.css

.css

.css

.css files as well.

We now want to integrate Nuxt UI v4.

Therefore we removed nuxt/tailwind.

For

<style scoped>

<style scoped>

<style scoped>

<style scoped> tags, I could fix some build errors with using

<style lang="postcss" scoped>

<style lang="postcss" scoped>

<style lang="postcss" scoped>

<style lang="postcss" scoped>

When running

npm run build

npm run build

, we now face these build errors for @apply and stuff in .css files:

[nuxi 4:19:02 PM]  ERROR  Nuxt Build Error: [@tailwindcss/vite:generate:build] Could not resolve value for theme function: theme(colors.link-color).

[nuxi 4:19:02 PM]  ERROR  Nuxt Build Error: [@tailwindcss/vite:generate:build] Could not resolve value for theme function: theme(colors.link-color).

[nuxi 4:19:02 PM]  ERROR  Nuxt Build Error: [@tailwindcss/vite:generate:build] Could not resolve value for theme function: theme(colors.link-color).

[nuxi 4:19:02 PM]  ERROR  Nuxt Build Error: [@tailwindcss/vite:generate:build] Could not resolve value for theme function: theme(colors.link-color).

I would assume, this is because the

tailwind.config.js

tailwind.config.js

tailwind.config.js

tailwind.config.js is not picked up anymore, because we define stuff like `colors.link-color´.

Do we have to convert our tailwind config to the new CSS configuration style from Tailwind v4? Or is there a way to use the legacy config style?

Use tailwind.config.js instead of CSS config in Nuxt UI v4?

Similar Threads

Similar Threads

Similar Threads