TailwindCSS classes not having an effect ?

[YO-SC]

Summary

Hello peeps, I am having a weird issue in which Tailwindcss classes are not being recognized on a NextJS v15 app. I am using the bun toolkit for building my app bun x create-next-app. I am also using shadcn/ui on my project.

Anyhow, say I have a <div className="bg-blue-400 ">DIV</div>, but after running bun dev the div displayed on the browser will not contain the class given to it. It will show on the html, but its css will just have the default, not the newly added css via className. I noticed this whenever I tried to position a div at the bottom-right of an image by using the absolute className on it, and having the image and it be wrapped around another div with the relative className.

I am using NextJS v15.2.4. Interestingly, I don't seem to be able to reproduce this issue on NextJS v15.3

relevant package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-slot": "^1.2.0",
    "@supabase/ssr": "^0.6.1",
    "@supabase/supabase-js": "^2.49.4",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.487.0",
    "motion": "^12.6.3",
    "next": "15.2.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.2.0",
    "tw-animate-css": "^1.2.5"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.4",
    "@eslint/eslintrc": "^3"
  }
}

relevant code snippet

import { TypographyH1 } from '@/components/ui/typography'
import Image from 'next/image'

export default function TestPage() {
  return (
    <main className="p-4">
      <TypographyH1>Test Page</TypographyH1>

      <div className="relative" style={{ position: 'relative' }}>
        <Image src={'/img.webp'} alt="image" width={1808} height={3216} />

        <div className="bg-red-400 p-2 rounded-md absolute bottom-0 right-0">
          DIV
        </div>
      </div>
    </main>
  )
}

(setting the style prop directly showed no issues)

I found a similar issue being reported #76761

Has this happened to anybody else?

EDIT: fyi, this is happening to me on a particular project. New projects created in the same manner does not seem to have this problem. Also, the project that is having this issue did not always had that problem; I used to put classNames and those would show up just fine. So idk what is going on, I might upgrade NextJS to see if that fixes it.

EDIT 2: I did upgrade from Tailwind v3 to v4 on this project. Also NextJS v14 to v15.

EDIT 3: Its definetly something with this project in particular. I copied the whole thing to another directory and it has the same issues. I am slowly investigating by adding files step by step to another project that as of this writting does not have the issue. I cry 😢

EDIT 4: I am gonna do testing by the file :)

EDIT 5:

EDIT 6 potential solution: I think i found a "fix", I will give the details later on a reply once I do some testing. Spoiler alert, its kinda dumb imo.

Additional information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Mon Apr  7 19:01:38 UTC 2025
  Available memory (MB): 7572
  Available CPU cores: 8
Binaries:
  Node: 22.14.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.13.2
Relevant Packages:
  next: 15.2.4 // There is a newer version (15.3.0) available, upgrade recommended! 
  eslint-config-next: 15.2.4
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A
 ⚠ There is a newer version (15.3.0) available, upgrade recommended! 
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Example

No response

[icyJoseph]

Could you share some screenshots of what's happening on the browser? or more detailed code snippets?

I wonder if it is a layers issue, or maybe related to https://tailwindcss.com/docs/detecting-classes-in-source-files, but also that the Next.js version upgrade fixes the issue is kind of weird.

[YO-SC]

Will check and share screenshots whenever I can (currently afk). Thanks for the suggestion 👍

[kienpt-dev]

Hey! Yeah, this definitely sounds like a weird one—but thanks for the detailed report, it helps a lot. Based on what you're describing and the fact that:

The className is visible in the HTML

But the styles aren’t applied

It works on a fresh new project

It used to work before

1. Tailwind Not Picking Up Classnames (Purge Issue?)
   Tailwind v4 changed how class scanning works. If content in tailwind.config.ts is not properly set, it may skip your classes during build.

2. Make Sure PostCSS is Properly Configured
   Tailwind v4 uses PostCSS under the hood. Verify your postcss.config.js is like:
   module.exports = {
   plugins: {
   tailwindcss: {},
   autoprefixer: {},
   },
   }

[YO-SC]

Now that you say that, I did upgrade from tailwind v3 to v4. I will do the research and also share screenshots whenever I can. Thx for the replies :D

[icyJoseph]

tailwind 4 doesn't need a config file anymore... but definitely, if you have upgraded, something might have broken, would like to hear more about what you find.

[YO-SC]

I won't say anything about a solution perse. I will just tell my story for now.

So, in the project that I was having problems with tailwindcss classes not having an effect on the dom. I had a app/test/page.tsx file. The file contained the relevant code snippet found on the discussion above. I then created a app/test2/page.tsx and app/some-page/page.tsx. Interestingly, tailwind worked as normal on the some-page page. Meanwhile, the test and test2 pages had the problem. I used the same code snippet for all 3. I then renamed test2 to wth and it worked as normal too!. I then renamed test to something-else and it tailwind worked as normal there too.

I think something related to that test filename for the page might be problematic for either nextjs or tailwind I think. I have no concrete evidence for this and I sadly cannot reproduce this issue on a newly created project (with the same packages and versions as the problematic project). The test page seems to work normal on this new project.

I will note that the newly renamed something-else file on the problematic project had its .next/ files still as test; at least for a while. It later changed to something-else.

I have been trying to figure why all of this happens for ~5 hours. Did I wasted my time? Maybe. But idk, I feel something is up here.

I will mark this as an answer (don't name your routes as test), but this is not to be considered as such at the moment I would say. Idk, I guess you see something new every day.

Again, there is a similar issue on this topic (#76761)

screenshots

Expected behavior on app/test/page.tsx:

Actual behavior on app/test/page.tsx:

After renaming app/test/page.tsx to app/something-else/page.tsx:

I can now change classNames and it will change accordingly:

some raw notes for context

its not:
- supabase
- packages installed (i did bun i)
- shadcnui
- components 
- tests
- middleware

so, maybe nextjs dont like "/test" in app/

i renamed /test to /something-else

i noticed the /test cache is still inside .next/ after renaming

renaming the route from /test/ to /something-else/ did the trick. now tailwind css works as expected when inserting new classes onto className and hot reloading.

i will try to reproduce

seems to work fine on new projects, even with /test/. i did rm -rf'ed the .next multiple times on the problematic project and it still presented issues