8000 Tailwind 4 requires restart to load changes on Webpack 5 · Issue #18172 · tailwindlabs/tailwindcss · GitHub
[go: up one dir, main page]

Skip to content
Tailwind 4 requires restart to load changes on Webpack 5 #18172
@carolinecblaker

Description

@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/postcss@4.1.8 ├── autoprefixer@10.4.21 ├── cross-env@5.2.1 ├── css-loader@7.1.2 ├── file-loader@6.2.0 ├── html-webpack-plugin@5.6.3 ├── lodash@4.17.21 ├── mini-css-extract-plugin@2.9.2 ├── postcss-import@16.1.0 ├── postcss-loader@8.1.1 ├── postcss@8.5.3 ├── tailwindcss@4.1.8 ├── webpack-cli@6.0.1 ├── webpack-dev-server@5.2.1 └── webpack@5.99.9

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0