Major 5.2.0 regression: no longer loads tailwind config by default

[bmulholland]

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. [Utility class] class doesn't exist. If [Utility class] is a custom class, make sure it is defined within a @layer directive. tailwindlabs/tailwindcss#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]

@atinux This is NOT fixed. If I upgrade to 5.3.0 and remove the tailwind config line I had to add for 5.2.0, I get the same error. This is in direct contradiction to how it previously worked, and how it's documented: https://tailwindcss.nuxtjs.org/getting-started/options#configpath

I know how hard it is to maintain all these packages, but I do expect that major regressions are at least confirmed to be working before they're marked as fixed.

[atinux]

I am sorry to see that is is still not fixed, it works on the projects we use.

Do you have a small reproduction that could help us narrow this bug? Also I would love to get @harlan-zw feedback on this if you got time.

In the meantime you can set the fixed version to v5.1.0 in your package.json

[Tahul]

Hello @bmulholland ; I am sorry if mentioning that my PR fixes the problem felt like a rush.

I've made two -edge NPM publishes of this PR in order to try it.

I successfully confirmed that this issue was closed from my side.

Concerning your mention to the docs and how configPath is supposed to work, the informations there are still valid.

If you want to browse a reproduction, you can go here, it uses 5.3.0:
https://stackblitz.com/edit/nuxt-starter-uclnhy?file=package.json,tailwind.config.js,app.vue,nuxt.config.ts,package-lock.json

Could you please provide a reproduction so I can maybe help you fixing your issue?

Reproductions are always the key point in finding a solution to a problem as a community, if you provided a reproduction in your first message I could've been testing my fix against it.

Thank you for your collaboration 🙂

[bmulholland]

The workaround I'm using is to set nuxt config with tailwindcss: { configPath: "~/tailwind.config.js" },. With that I can use 5.2 and 5.3. I suppose with that in mind, the problem is solved for me -- but this is going to bite others who upgrade, and as I say it's highly non-obvious what the issue is.

Is it possible the projects you use configure tailwind's config? Or don't use a config? Did you test with nuxt 2?

I spent over an hour trying to repro and nuxt is so finnicky with upgrading packages that I give up. At some point every codesandbox starts being unable to run with unrelated errors like "TypeError: Cannot read property 'push' of undefined addDevServerHandler (node_modules/@nuxt/kit/dist/index.mjs:196:38)" and something about defu. This has nothing to do with what I changed or am trying to repro and it's just not worth my time

The sandbox is here if someone wants to try it themselves: https://codesandbox.io/s/nuxt-dark-tailwindcss-forked-y5id7g?file=/package.json

The problem is solved for me with the above setting, so it's not worth me putting more time into it.

[harlan-zw]

Hey @bmulholland

It sounds like you've had a frustrating time debugging this so thanks for sharing your findings.

I've tried testing v5.3.0 of the module, with and without my changes from that commit, and both seem to be working correctly for Nuxt v2.15.8 (minus the issue I link below). I'm wondering how you isolated my change to be the cause for the regression? It does seem a likely candidate but I haven't been able to replicate it.

The exception you're getting above is unrelated to my change. I've replicated that and made a separate issue for it here: #507

If you can confirm the nuxt v2 version or provide a reproduction I can dig into it further

[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!

[nasirDoe]

i still got the error, the solution is i create files tailwind.css and tailwind.config.js. and config these in nuxt.config.js

tailwindcss: {
  configPath: '~/tailwind.config.js',
  cssPath: '~/assets/css/tailwind.css',
},