Major 5.2.0 regression: no longer loads tailwind config by default

Version

@nuxtjs/tailwindcss: 5.2.0 nuxt: 2. it would be nice if the template suggested an easy way to see this

This was highly annoying to debug – see below – and is a major regression.

Prior to version 5.2.0, my tailwind config was loaded automatically. As of 5.2.0, it only gets loaded if I add to my nuxt config tailwindcss: { configPath: '~/tailwind.config.js' },

Here’s the line that broke it: https://github.com/nuxt-community/tailwindcss-module/pull/483/files#diff-030fc083b2cbf5cf008cfc0c49bb4f1b8d97ac07f93a291d068d81b4d1416f70R32

---

Now, here’s the thing: when tailwind stops loading its config, it gives errors about completely unrelated things.

Upgrading to version 5.2.0 starts bringing up a new error:

Syntax Error: SyntaxError                                                                      friendly-errors 12:40:53

(36:0) .../layouts/default.vue The `text-navy` class does not exist. If `text-navy` is a custom class, make sure it is defined within a `@layer` directive.

  34 | body {
  35 |   @apply font-sans;
> 36 |   @apply text-navy;
     |                                       ^
  37 |   @apply bg-white;
  38 | }

Now, if you go looking for that error, you’ll find stuff like this:

1. https://github.com/tailwindlabs/tailwindcss/issues/7055
2. https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css

And then you’ll spend hours hunting down why you need to worry about apply when you haven’t used that at all.

In my example above, text-navy is indeed a custom class, but it’s defined by my tailwind config. There’s no indication that my config isn’t being loaded anymore, just that crash above.

To diagnose this, I manually upgraded every sub-package of 5.2.0, such that my yarn.lock was at the exact delta that the branch to upgrade @nuxtjs/tailwindcss to 5.2.0 had (even @types!), except for this package. Then I upgraded 5.2.0. that confirmed it was this package specifically. Then I hunted through all the details of the release, formed a hunch, and tested it.

[bmulholland]

You’re right about the frustration, and it’s definitely coming out in this thread – thanks for being understanding about that… I’ve just already spent 4-5 hours on something that should have been a minor update and is really not enough of a priority to take up that much time in my week.

---

Regardless, I’ve just spent even more time digging in and debugging. The module now uses nuxt kit, and finding the tailwind path is done using nuxt kit resolvePath. That’s not finding it because resolvePath takes the filename and directly adds the extension – which it expects to have a dot at the start. And for the default extensions, it does. But for resolving the tailwind config, there’s no dot at the beginning, so it’s looking for e.g. “tailwind.configjs”. That is because, for me, nuxt.options.extensions does not include a dot at the beginning.

This is then hard to track down and confirm, and I had to dig through source to confirm because it’s not really documented, but from what I can tell from these two lines: https://github.com/nuxt/nuxt.js/blob/2ec62617ced873fef97c73a6d7aa1271911ccfd5/packages/config/src/options.js#L200 and https://github.com/nuxt/typescript/blob/85368409ab0aec9e763a24ad77ca17db129b4e6a/packages/typescript-runtime/src/index.ts#L20

The nuxt.config.extensions array in nuxt 2 does not include a dot at the beginning. So therefore, nuxt kit is going to look for filenames without the dot and will not find them when used with nuxt 2. And the line I pointed to at the very beginning is the culprit. And since 5.3.0 does not change the resolvePath usage, and continues to pass in the base filename instead of with an extension, it continues to have the exact same bug.

Are you sure that you tested on nuxt 2? Double check what is happening in resolvePath, then, and then how your extensions have a dot when nuxt 2 doesn’t use them. If you post your (lack of) repro, then I can dig into that too.

---

Written earlier:

Yeah I know the exception is unrelated to your change – any maybe to the tailwind module at all? It just blocked me from being able to repro this, and I restarted a sandbox from scratch 4 times trying to even get to a way to repro.

As to how I isolated the change, I did make a logical jump to be that specific line of code. Actually I would have gone through and done a commit-by-commit installation of the module to be very clear about it, as I often do in ruby-land, but the JS world makes it really hard to install packages directly from a git commit.

Anyway, here’s what I know:

1. @nuxt/tailwind <5.2.0 does not have the issue. 5.2.0 does. I just triple-confirmed this again by removing the tailwind config line from my nuxt config, setting those strings in package.json, and yarn install && yarn dev.
2. 5.2.0 includes only a few changes: https://github.com/nuxt-community/tailwindcss-module/releases/tag/v5.2.0
3. One of those is a docs change, and the other impacts only Vite (I use webpack 4)
4. The only change in the TS PR aside from docs and playground is the line I linked/commented on
5. Also, the fact that a file was loaded before, then the filename for that config file was changed, and the config file stopped being loaded around the same time, seems highly suspicious.

[bmulholland]

Confirmed fixed in 5.3.1 – thanks, all!