Tailwind 4 requires restart to load changes on Webpack 5

[carolinecblaker]

What version of Tailwind CSS are you using?

v4.1.8

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

├── @tailwindcss/[email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

What version of Node.js are you using?

20.17.0

What browser are you using?

Chrome

What operating system are you using?

Mac OS Sonoma

Reproduction URL

Ok.

Describe your issue

Updating a code set to tailwind 4 has resulted in some dev server breakage.

I'm under the impression that tailwind 4 is installed correctly:

• npm run prod produces stylesheets and code as intended
• npm run dev fires up a browser with styles included in referenced html

I'm under the impression that Webpack 5 is set up for Hot Module Reload (HMR):

• 'npm run dev' creates styles on-the-fly when introduced to index.html, using Tailwind 3.

Feature I lost with upgrade:

• 'npm run dev' to create on-the-fly tailwind styles for the browser to show when I save my work in my html file.

What's going right:

The dev server starts and stops without errors, and serves the page.
The dev server does serve a complete stylesheet when it starts.

Generally, "it works."

What's not working:

HMR (or manual) reloads appear to detect tailwindcss changes in the html, but the process of writing that style to the dev server stylesheet doesn't take place. When a tailwind class is added to the index.html, the style doesn't display. There is a void of style, instead. I am testing this with text colors on this repository. Introduced text color classes yield a dark text treatment (unstyled) and there is no style in the inspector relating to the tailwind class I just added.

I can't get a new text color to appear without shutting down and restarting my dev server, but that does work, see "what's going right".

You may find evidence in the repo of all the ways I've tried to fix this. I apologize if this amounts to errors due to me chasing my tail. I upgraded the code set manually and followed multiple sets of directions and used at least 15 keywords to search around other peoples' questions. It does look like others have reported other Hot Reload questions recently, so it seemed like it could be a bug.

[wongjn]

I get the following errors when running npm run dev:

ERROR in ./src/assets/img/ccb-bellrock-selfie.jpeg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./src/index.js 3:0-57

ERROR in ./src/assets/img/github.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
 @ ./src/index.js 6:0-41

ERROR in ./src/assets/img/linkedin.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn icon</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
 @ ./src/index.js 5:0-43

ERROR in ./src/assets/img/sometimes_800.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./src/index.js 4:0-50

ERROR in ./src/assets/img/53EE617A-796E-48FD-8120-17141EC25C13.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./src/index.js 2:0-72

webpack 5.99.9 compiled with 5 errors in 525 m

Do you have a webpack.config.js file that perhaps you forgot to commit?

[carolinecblaker]

Please pull and install a-fresh, thanks.

[wongjn]

You'd want to use style-loader in dev mode, see the documentation for an example.

[carolinecblaker]

Wow, that's a needle I didn't expect to need or find in that haystack. T'worked.

[joy-dey]

Using tailwindcss 4.1.8 on a Angular 19 project. Styles are not getting generated. Tried ng serve --no-hmr to start the project but unfortunately no luck. Styles are not generating. This issue is I guess specific to v4.1.8 because I have another project on same angular setup running v4.1.7 and it works perfectly.

@carolinecblaker

I can't get a new text color to appear without shutting down and restarting my dev server

Unfortunately not working on my case but was working till I stopped my dev server.

[thecrypticace]

Hey! Since the webpack config is missing from that project I'm not sure how much I'll be able to help but I setup a test project here with working HMR: https://github.com/thecrypticace/webpack-v4-example

You can run npx webpack-dev-server to test it.

In your project I noticed that the index.html file is inside the src directory. If you're using static assets to serve that file from src webpack will always do a full page reload when it detects changes to any files inside that folder. If you are doing that you'll want to move the index.html file out of that folder.