Tailwindcss 3.2.1 Not working with Nextjs

[jnatmorris]

What version of Tailwind CSS are you using?

Not working with: v3.2.1
Working with: v3.1.8

What build tool (or framework if it abstracts the build tool) are you using?

nextjs: 12.3.1

What version of Node.js are you using?

node version: v18.11.0

But as am I'm using yarn: yarn version: v1.22.19

What browser are you using?

I'm using chrome, safari, and duck duck go. None of them show the css with tailwind version 3.2.1, but all do with version 3.1.8.

What operating system are you using?

macOS Monterey

Reproduction URL

github repo with a minimum reproduction of the bug: https://github.com/jnatmorris/tailwindcss-bug-9649

Describe your issue

When tailwind version 3.2.1 came out, I updated tailwind in my project from version 3.1.8. When I updated tailwind, the css was no longer being applied to the html nor was even being sent to the client. When downgrading to version 3.1.8, it works as intended. This lack of css occurs in development as well as in production builds of nextjs. I have tested this in other projects, and get this bug in the repo provided above.

Steps to Reproduce (more info given in github repo provided):

1. Create next app
2. Add dependencies: yarn add -D tailwindcss postcss autoprefixer
3. Generate tailwind.config.js and postcss.config.js : npx tailwindcss init -p
4. Configured paths in tailwind config
5. Add typography plugin: yarn add -D @tailwindcss/typography
6. Add typography plugin to config
7. Add the Tailwind directives to CSS
   8.Start the dev server: yarn dev
8. At this point no css is loading
9. Remove .next folder to ensure no cross contamination when testing other version of tailwind
10. Change tailwind version: yarn add -D tailwindcss@3.1.8
11. Start the dev server and see css: yarn dev

Tailwind version 3.2.1

Tailwind version 3.1.8

Also discussed in Tailwind discord
https://discord.com/channels/486935104384532500/1033999336499060746

[thecrypticace]

Hey! I think I've figured out what this could've been. Our insiders build should be out in a few minutes. I would be super appreciative if you could give that a try and see if it works for you: npm install tailwindcss@insiders

[jnatmorris]

Hey thanks for such a quick response and fix! Glad to report it's working as expected again. Any ETA on this being in a mainstream release?

[lvdlrs]

Just a quick question I notice this problem I just want to know why the content are not detecting by tailwind? what does the npm install tailwindcss@insiders do why it's not detecting the content just wondering? thanks for response

[jnatmorris]

A short description of why it occurred can be found here. And to your question about tailwindcss@insiders, that's just a pre-release grounds for the larger tailwindcss project. Sure we can expect this bug fix to be apart of the next broader release such that you can then npm install tailwindcss@latest or e.g. npm install tailwindcss@3.2.2.