Fast Refresh / Hot Reload not working with Next.js 15 and Tailwind CSS 4 — requires full page reload on changes

[GabrielLeandroBS]

I've created a fresh Next.js 15 project from scratch with the default configuration, integrating Tailwind CSS version 4 following the official setup guide.

However, fast refresh / hot reload is not working as expected:

Whenever I make any modification to components or styles, the page does not update automatically.

I have to manually refresh the entire page to see changes.

This severely impacts development productivity and debugging.

Steps to reproduce:

Create a new Next.js 15 project (npx create-next-app@latest)

Install and configure Tailwind CSS 4 with default settings

Start the development server (next dev)

Modify any component or style file

Observe that the page does not update automatically (no fast refresh)

Expected behavior:
Changes in component or style files should trigger a fast refresh / hot reload without a full page reload.

Actual behavior:
The browser requires a full manual reload to reflect changes.

Environment:

Next.js version: 15.x

Tailwind CSS version: 4.x

Node.js version: 20

OS: Windows 11

[thecrypticace]

Hey! I'm not seeing this behavior here. Editing components and CSS files works as expected. Can you provide a reproduction?

[Spratch]

I have the same issue with Next.js 15.5, Tailwind CSS 4.
Not always. But more often on certain components or pages than others.
When it happens, I have to relaunch pnpm dev to see the results.

Never happened to me before, even on another project in Next.js 15.2 with Tailwind CSS 4.

Not sure this has something to do with Tailwind tho, I tested other attributes than classes, they're not updating either.

[Spratch]

I don't have this problem without the --turbopack flag on next dev

[hhao99]

I had same problem, all the page can not hot reload or refresh, only delete .next cache dir can reflect the changes.

[caelangrgurovic]

I was having the same issue.

For whatever reason, it seems that React's use() hook can sometimes cause Hot Reloading to break.

Replacing it with useQuery and setting suspense: true seemed to work best for me.
Maybe check if this is the cause for you, too?

// Before
const user = use(getUserData());

// After
const user = useQuery({
    suspense: true,
    queryKey: [...],
    queryFn:  getUserData,
});

[mcmillion]

In my case it's not even that things don't update, it's that they actually break. E.g. if I update the background color on an element and save, it disappears completely, and then is correct on a hard refresh.

[ericbf]

It doesn’t break necessarily. The markup is updated when you change the class, but the styles aren’t updating to include the definition of the class you changed it to (unless it’s already used elsewhere). Hard refresh force updates the styles, so you now see the proper styles reflected. For example, if you have a div with bg-black and change it to bg-white, unless you already use bg-white elsewhere, bg-white would not be defined in your resolved CSS and would render no background. If you change it back to bg-black without refreshing, you’ll see the background again. The issue seems to be related to styles not updating when only changing class names in markup.

[Gurimarukin]

I had a similar problem here. next@16.1.0 and tailwindcss@4.1.18
I was messing around with drop-shadow. This is the final utility :

@utility drop-shadow-br-* {
  --tw-drop-shadow-size: drop-shadow(
    calc(--value(integer) * var(--unit)) calc(--value(integer) * var(--unit)) 0
      var(--tw-drop-shadow-color)
  );

  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,)
    var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,)
    var(--tw-drop-shadow,);
}

But before getting it to work, I made different changes and it didn't hot reload, for example:

-  --tw-drop-shadow: drop-shadow(
+  --tw-drop-shadow-size: drop-shadow(
    calc(--value(integer) * var(--unit)) calc(--value(integer) * var(--unit)) 0
      var(--tw-drop-shadow-color)
  );

Restarting my yarn dev wasn't enough, I had to delete .next/ directory as well. After that it worked.

If I bump into this problem again, I guess I'll just use Tailwind CLI (adding it to yarn dev with nodemon).

[diegomrv]

Same issue here with next@16.1.1 and tailwindcss@4.1.14

I started noticing it when I updated my project from next 15 to 16 like a month ago, and definitely has something to do with Turbopack, because if I run npm run dev --webpack, everything reloads and updates correctly. So just leaving this comment here for people that stumble into this thread.

Still, I think something weird is going on because I was using Turbopack in Next 15. I read that in Next 16 some "File System Cache" was enabled by default, so I disabled it, but css updates still don't work.

[mohassan-dev]

Can confirm using webpack worked while running next@16.2.2 and tailwindcss@4.1.4.

I updated to tailwindcss@4.2.2 and it looks like it got fixed and works for me on both turbopack and webpack.

[byjml]

The likely cause is Tailwind source detection. If stylesheet is at src/app/globals.css, but the classes changed live in blindspots like src/components and src/theme and those sibling folders were not explicitly declared as sources.

This fixed for me:

// file: ./src/app/globals.css
@import 'tailwindcss';

@source '../components';
@source '../theme';

[Gurimarukin]

It happened to me, but I have a single global.css

[byjml]

@Gurimarukin Have you registered your @source paths so Tailwind can pick up changes?

[Gurimarukin]

Ehm, my src/app/globals.css starts with

@import 'tailwindcss' source('..');

[sydneyvaughn75-ops]

Ah, got it—so it might be missing the sibling folders in the @source paths. Does adding @source '../components'; @source '../theme'; fix it for you too?

…

On Fri, Mar 27, 2026, 4:49 AM Gurimarukin ***@***.***> wrote: Ehm, my src/app/globals.css starts with @import 'tailwindcss' source('..'); — Reply to this email directly, view it on GitHub <#18180?email_source=notifications&email_token=B7HZNK2VJICX3CYDZSW3OFD4SZFEJA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCNRTGQYTKMZZUZZGKYLTN5XKU43VMJZWG4TJMJSWJJLFOZSW45FMMZXW65DFOJPWG3DJMNVQ#discussioncomment-16341539>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7HZNKYOET2VYAQVW3L63FD4SZFEJAVCNFSM6AAAAAB6GZKBKKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMZUGE2TGOI> . You are receiving this because you are subscribed to this thread.Message ID: <tailwindlabs/tailwindcss/repo-discussions/18180/comments/16341539@ github.com>

[sydneyvaughn75-ops]

Awesome, thanks for the update!

…

On Thu, Apr 9, 2026, 3:58 AM Mohamed Hassan ***@***.***> wrote: Can confirm using webpack worked while running ***@***.*** and ***@***.*** I updated to ***@***.*** and it looks like it got fixed and works for me on both turbopack and webpack. — Reply to this email directly, view it on GitHub <#18180 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7HZNK3FXB7NZZ5TRR3S3YT4U5QZTAVCNFSM6AAAAAB6GZKBKKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMNJQGA3DONI> . You are receiving this because you commented.Message ID: ***@***.*** com>

[tadanobutubutu]

Potential Solutions for Fast Refresh Issues with Tailwind CSS 4 + Next.js 15

This issue is often related to how the new Tailwind v4 engine interacts with Next.js's Turbopack or PostCSS pipeline. Here are a few things to check:

1. Turbopack vs Webpack

If you are using --turbo, try running without it to see if the issue persists:

npx next dev --turbo  # vs
npx next dev

There have been known HMR inconsistencies in early Next.js 15 + Tailwind 4 integrations when using Turbopack.

2. Ensure Correct Entry Point

In Tailwind v4, you should typically only have @import "tailwindcss"; in your CSS. If you still have an old postcss.config.js or tailwind.config.js lingering from v3, they might be interfering with the new JIT compiler's ability to watch files correctly.
Action: Try removing (or renaming) tailwind.config.ts/js and postcss.config.js if you are fully on v4.

3. Folder Name Casing

On macOS/Windows (case-insensitive file systems), if your folder is named Components but you import from ./components, HMR will often fail silently.
Action: Audit your imports to ensure they exactly match the filesystem casing.

4. PostCSS Version

Ensure you have the latest postcss and next versions. Next.js 15.1.x+ has fixed several HMR-related bugs with CSS-in-JS and modern CSS engines.

5. Watcher Limits (Linux/WSL)

If you're on Linux, ensure your fs.inotify.max_user_watches is high enough, as Tailwind v4's scanner is very active.

---

Hopefully one of these helps get your dev environment back to being snappy!

[Nersisiian]

Hi! Welcome to Tailwind CSS! You can definitely use Tailwind without Node.js or npm. The easiest way for a beginner is to include the Tailwind CDN in your HTML file.

Step 1: Add the CDN link

Just add this <script> tag inside the <head> of your HTML file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Example</title>
    <!-- Tailwind CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-3xl font-bold text-blue-600">
        Hello, Tailwind!
    </h1>
</body>
</html>

Important Notes:
The CDN version is full and uncompressed (for development). It's perfect for learning or small projects.

If you want to use custom configurations (e.g., custom colors), you can add a tailwind.config object in a separate <script> tag. [Read more here](https://tailwindcss.com/docs/installation/play-cdn).

Alternative (without CDN, just a CSS file):
If you prefer a local .css file instead of the CDN, you can download a pre-compiled version from [Tailwind's GitHub releases](https://github.com/tailwindlabs/tailwindcss/releases) and link it like a normal stylesheet. But for a quick start, the CDN is the simplest.

Let me know if you run into any issues!