Nuxt Tailwind Class Scanning

TL; DR;

Make sure your tailwind.config.js/ts configuration content.files key includes your .vue source file paths.

Key Learning

To reduce bloat, Tailwind scans source files to compile a list of Tailwind classes that are used and then dynamically excludes the tailwind classes you don't. The tailwind.config.js configuration file and the key content.files determines which files are scanned for classes

Troubleshooting

Ever had something just 'break' and you don't know why? And even worse it breaks, but only partially? That happened to me for some Tailwind CSS classes. During my blog refactoring some of my tailwind classes started to fail. The grid-col-7 class wasn't working. I use the Nuxt Tailwind Module "@nuxtjs/tailwindcss" which makes it easy to use Tailwind CSS in a Nuxt project.

In the 'catch-all' [...slug].vue file of my project, the responsive design for articles and posts allows for a side bar Table of Contents at medium or higher resolutions. The basic Tailwind CSS grid framework looked like this.

<div class="grid grid-cols-10">
  <div class="col-span-10 md:col-span-7">
     <!-- Article content -->
  </div>
  <div class="hidden md:col-span-3 md:block">
    <!-- Table of Content -->
  </div>
</div>

The symptom I observed was at medium or higher resolutions the article content did not shrink to grid-col-7 but stayed at grid-col-10. Investigating in the debugger showed that the grid-col-7 class was not defined, but grid-col-10 was!

It's a maddening situation where only one of the two grid class were working. They both should be available from the Tailwind CSS documentation on grid classes.

After trying different things, I realized since at least some of the Tailwind CSS classes were defined it must part of new optimizations where some classes are left out to make the CSS smaller. Tailwind CSS Nuxt module will scan all your source files and find every use of Tailwind CSS classes and then include only those classes in the CSS file.

Somehow the Tailwind scanner was not seeing the grid-col-7 class in this file and excluding it.

The Nuxt JS Tailwind module documentation states that the default Nuxt Tailwind Configuration file scan paths should look like this. (i.e. you shouldn't need to include this in your tailwind.config.js)

{
  "content": {
    "files": [
      // all directories and extensions will correspond to your Nuxt config
      "{srcDir}/components/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/pages/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/plugins/**/*.{js,ts,mjs}",
      "{srcDir}/composables/**/*.{js,ts,mjs}",
      "{srcDir}/utils/**/*.{js,ts,mjs}",
      "{srcDir}/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/app.config.{js,ts,mjs}",
      "{srcDir}/app/spa-loading-template.html"
    ]
  }
}

But it wasn't.

So I actually hard coded the defaults, substituting the {srcDir} for . and then it worked!!!

Hardcoded scan paths in the tailwind.config.js file:

{
  "content": {
    "files": [
      // all directories and extensions will correspond to your Nuxt config
      "./components/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "./layouts/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "./pages/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "./plugins/**/*.{js,ts,mjs}",
      "./composables/**/*.{js,ts,mjs}",
      "./utils/**/*.{js,ts,mjs}",
      "./{A,a}pp.{vue,js,jsx,mjs,ts,tsx}",
      "./{E,e}rror.{vue,js,jsx,mjs,ts,tsx}",
      "./app.config.{js,ts,mjs}",
      "./app/spa-loading-template.html"
    ]
  }
}

I'm still not sure about the root cause and why the default {srcDir} was incorrect (it had been working fine until I updates Nuxt and its modules) but my guess is that it is one of the following

1. Nuxt v4 is moving its source directories for the client from the root to the /app folder and might be providing /app as the {srcDir} to the Tailwind Nuxt Module. I'm using Nuxt v3 without future compatibility mode
2. Tailwind Nuxt Module is reading the {srcDir} as a unix or linux file path instead of my windows relative path

I hope those who encounter a similar issue finds this information useful!