Nuxt•4w ago

Tailwind v4 not working with nuxt 4.2.0

Hi, Tailwind v4 isn't working with nuxt. I tried the steps in the official tailwind documentation https://tailwindcss.com/docs/installation/framework-guides/nuxt but it didn't work I also tried using postcss, it threw an error an told me to install tailwindcss/postcss, which I did but that also didn't work Is there another way to install tailwind? A module that I'm missing or a version missmatch? This is my pack-lock.json: "packages": { "": { "name": "frontend", "hasInstallScript": true, "dependencies": { "@lucide/lab": "^0.1.2", "@nuxt/eslint": "^1.10.0", "@nuxt/test-utils": "^3.20.1", "@pinia/nuxt": "^0.11.2", "@tailwindcss/vite": "^4.1.16", "@vueuse/core": "^14.0.0", "date-fns": "^4.1.0", "eslint": "^9.38.0", "firebase": "^12.5.0", "lucide-vue-next": "^0.552.0", "nuxt": "^4.2.0", "pinia": "^3.0.3", "tailwindcss": "^4.1.16", "typescript": "^5.9.3", "vue": "^3.5.22", "vue-router": "^4.6.3" } }, app/assets/css/main.css: @import "tailwindcss"; I get no errors, tailwind just doesn't work.

Install Tailwind CSS with Nuxt

Setting up Tailwind CSS in a Nuxt project.

6 Replies

kapa.ai•4w ago

Hi @Andiesgames. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about using Tailwind CSS v4 with Nuxt 4.2.0. Most available sources discuss Tailwind integration with Nuxt 3 or earlier Tailwind versions, and there is no clear documentation or community answer confirming compatibility or providing a working setup for Tailwind v4 with Nuxt 4.2.0. There are also mentions of challenges when upgrading between major versions of Nuxt and Tailwind, especially in monorepo or layered setups, but no step-by-step solution for your specific scenario is provided in the sources above. If you are experiencing issues, it may be due to version mismatches or incomplete support for Tailwind v4 in the current Nuxt ecosystem, but this is not directly confirmed in the provided documents. If you need to ensure Tailwind works with Nuxt, you might consider using the officially supported @nuxtjs/tailwindcss module, as shown in several examples for Nuxt 3, but again, there is no explicit confirmation for Nuxt 4.2.0 and Tailwind v4 in the sources above. If you continue to have issues, you may want to monitor the Nuxt and Tailwind repositories for updates or open an issue for clarification. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@548834388100775946> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AndiesgamesOP•4w ago

@kapa.ai How can I install that module?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To install the official Tailwind CSS module for Nuxt, you can add the @nuxtjs/tailwindcss module to your project. According to the knowledge sources, you should: 1. Install the module using npm:

   npm install -D @nuxtjs/tailwindcss

   npm install -D @nuxtjs/tailwindcss

2. Add it to the modules array in your nuxt.config.ts or nuxt.config.js:

   export default defineNuxtConfig({
     modules: [
       '@nuxtjs/tailwindcss',
     ],
   })

   export default defineNuxtConfig({
     modules: [
       '@nuxtjs/tailwindcss',
     ],
   })

3. (Optional) Create a CSS file (e.g., assets/css/main.css) and import Tailwind:

   @import "tailwindcss/base";
   @import "tailwindcss/components";
   @import "tailwindcss/utilities";

   @import "tailwindcss/base";
   @import "tailwindcss/components";
   @import "tailwindcss/utilities";

Then, register this file in your Nuxt config:

   export default defineNuxtConfig({
     css: [
       '@/assets/css/main.css',
     ],
     modules: [
       '@nuxtjs/tailwindcss',
     ],
   })

   export default defineNuxtConfig({
     css: [
       '@/assets/css/main.css',
     ],
     modules: [
       '@nuxtjs/tailwindcss',
     ],
   })

This approach is confirmed to work for Nuxt 3 in the knowledge sources, but there is no explicit confirmation for Nuxt 4.2.0 and Tailwind v4 compatibility in the provided documents. If you encounter issues, it may be due to version mismatches or incomplete support for the latest versions, as noted in the sources How to change the default tailwind font-family in nuxtjs3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@548834388100775946> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AndiesgamesOP•4w ago

I installed v3 and it worked

Gaming

Programming

Tailwind v4 not working with nuxt 4.2.0

Did you find this page helpful?