chore: document supported Tailwind v4 setup by benpsnyder · Pull Request #2204 · analogjs/analog

benpsnyder · 2026-03-27T07:36:47Z

PR Checklist

Primary scope: create-analog
Secondary scopes: nx-plugin, docs, vite-plugin-angular

Recommended merge strategy for maintainer [optional]

Squash merge
Rebase merge
Other

What is the new behavior?

This PR is now the narrow Tailwind follow-up to Tailwind stylesheet pipeline overhaul analogjs/analog#2226 and the closeout direction from RFC: Tailwind stylesheet pipeline overhaul analogjs/analog#2229.

Against the current analogjs/alpha tip, the live diff does two things:

aligns generated Vite configs so analog() is listed before tailwindcss() in create-analog and Nx app scaffolds
rewrites the Tailwind v4 docs and @analogjs/vite-plugin-angular README pointer around the supported v3 alpha setup that generated apps already use

The docs now explicitly describe the current pipeline split:

dev/watch mode relies on @tailwindcss/vite
the build/non-externalized preprocessing path still relies on postcss.config.mjs with @tailwindcss/postcss
keeping both configured does not mean the normal externalized dev stylesheet path is processed twice; they serve different paths in the current implementation

Current diff in this PR

Generator alignment:

packages/create-analog/template-latest/vite.config.ts
packages/nx-plugin/src/generators/app/files/template-angular*/vite.config.ts__template__
scaffold test and snapshot updates for those templates

Docs and README cleanup:

apps/docs-app/docs/integrations/tailwind/index.md
apps/docs-app/docs/packages/create-analog/overview.md
apps/docs-app/docs/packages/vite-plugin-angular/css-preprocessors.md
packages/vite-plugin-angular/README.md

Test plan

nx format:check
pnpm build
pnpm test
Targeted verification

Targeted verification run for this branch:

pnpm exec vitest run packages/create-analog/__tests__/cli.spec.ts
pnpm exec vitest run --globals packages/nx-plugin/src/generators/app/generator.spec.ts packages/nx-plugin/src/generators/preset/generator.spec.ts

Does this PR introduce a breaking change?

Yes
No

Other information

This PR should be reviewed as a small consistency follow-up, not as a second implementation pass on the Tailwind pipeline itself. The pipeline/runtime work is already in Tailwind stylesheet pipeline overhaul analogjs/analog#2226.

netlify · 2026-03-27T07:36:52Z

✅ Deploy Preview for analog-blog ready!

Name	Link
🔨 Latest commit	`8fb2979`
🔍 Latest deploy log	https://app.netlify.com/projects/analog-blog/deploys/69d3b5344e208e0008df9a3c
😎 Deploy Preview	https://deploy-preview-2204--analog-blog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-03-27T07:36:52Z

✅ Deploy Preview for analog-app ready!

Name	Link
🔨 Latest commit	`8fb2979`
🔍 Latest deploy log	https://app.netlify.com/projects/analog-app/deploys/69d3b534c1a6dc000892b17b
😎 Deploy Preview	https://deploy-preview-2204--analog-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2026-03-27T07:36:54Z

📝 Walkthrough

Walkthrough

This PR adds comprehensive Tailwind CSS v4 integration documentation and updates scaffolding templates to enforce a specific plugin ordering in Vite configurations. The key change requires analog() to precede tailwindcss() in the plugins array. Documentation additions include a new dedicated Tailwind integration guide, updates to create-analog and vite-plugin-angular docs clarifying configuration requirements (including postcss.config.mjs with @tailwindcss/postcss), and a note that Analog handles component-level @reference injection automatically. All corresponding template files (create-analog and nx-plugin generators across Angular v17, v18, v19, and base) and their test assertions have been updated to enforce the new plugin order.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The changes follow a consistent, repetitive pattern (reordering analog() and tailwindcss() across multiple template files), reducing cognitive load. However, plugin initialization order in Vite configurations has semantic significance for build behavior, warranting careful validation that the ordering change does not introduce regressions in HMR, asset handling, or style injection. The documentation additions are clear and self-contained. Test updates correctly enforce the new ordering, but confirmation that this change resolves any prior build issues or incompatibilities (if any existed) is advised.

🚥 Pre-merge checks | ✅ 1 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title is a generic, unscoped documentation update that fails to follow the Conventional Commit style requirement for this PR, which affects multiple scopes including create-analog, nx-plugin, and vite-plugin-angular.	Use a scoped title like 'chore(create-analog): document supported Tailwind v4 setup' or use a multi-scope format that reflects the primary scope affected by generator alignment changes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description thoroughly details the PR objectives, affected scopes, changes made, test plan, and includes links to related issues, clearly relating to the documented Tailwind v4 setup changes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

benpsnyder · 2026-03-27T17:44:37Z

@coderabbitai resume

coderabbitai · 2026-03-27T17:44:41Z

✅ Actions performed

Reviews resumed.

brandonroberts · 2026-03-30T12:38:32Z

If we need a difference between dev/prod, we shouldn't recommend the @tailwindcss/vite plugin. It should be either/or, not both

github-actions · 2026-04-06T13:02:41Z

This PR touches multiple package scopes: create-analog, nx-plugin, vite-plugin-angular.

Please confirm the changes are closely related. Squash merge is highly preferred. If you recommend a non-squash merge, add a brief note explaining why the commit boundaries matter and why this PR should bypass focused changes per package.

benpsnyder · 2026-04-06T13:30:43Z

@brandonroberts I force-pushed this with rebase merge ready commits. Cleaned it up and refocused it.

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/docs-app/docs/integrations/tailwind/index.md`:
- Around line 127-131: Update the "HMR" section to add an explicit
Angular-version caveat: state that Angular HMR support requires Angular v19+ and
that Angular v16–v18 intentionally disable HMR and emit a runtime console
warning; reference the HMR heading in
apps/docs-app/docs/integrations/tailwind/index.md and, if helpful, link or
cross-reference the guidance in apps/docs-app/docs/guides/migrating.md (PR
`#2226`) so readers don’t assume HMR behaves the same across all supported Angular
versions.

In `@packages/vite-plugin-angular/README.md`:
- Line 97: Replace the relative docs link "/docs/integrations/tailwind" in the
README (the markdown link text "Tailwind CSS integration guide") with an
absolute docs URL (e.g.
https://your-docs-site.example/docs/integrations/tailwind) so the link resolves
correctly on GitHub/NPM README renderers; update the markdown link target to the
canonical site URL and verify the live README renders the link correctly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d2615d25-bdd1-4f9c-8523-b85dda81f871

📥 Commits

Reviewing files that changed from the base of the PR and between cf86db8 and 8fb2979.

⛔ Files ignored due to path filters (1)

packages/nx-plugin/src/generators/preset/__snapshots__/generator.spec.ts.snap is excluded by !**/*.snap and included by packages/**

📒 Files selected for processing (11)

apps/docs-app/docs/integrations/tailwind/index.md
apps/docs-app/docs/packages/create-analog/overview.md
apps/docs-app/docs/packages/vite-plugin-angular/css-preprocessors.md
packages/create-analog/__tests__/cli.spec.ts
packages/create-analog/template-latest/vite.config.ts
packages/nx-plugin/src/generators/app/files/template-angular-v17/vite.config.ts__template__
packages/nx-plugin/src/generators/app/files/template-angular-v18/vite.config.ts__template__
packages/nx-plugin/src/generators/app/files/template-angular-v19/vite.config.ts__template__
packages/nx-plugin/src/generators/app/files/template-angular/vite.config.ts__template__
packages/nx-plugin/src/generators/app/generator.spec.ts
packages/vite-plugin-angular/README.md

coderabbitai · 2026-04-06T13:35:39Z

apps/docs-app/docs/integrations/tailwind/index.md

+## HMR
+
+Prefer `hmr` over `liveReload` when you need to configure Angular HMR explicitly. `liveReload` remains a compatibility alias.
+
+Tailwind support does not require you to enable HMR manually. The stylesheet pipeline is handled independently from whether Angular can produce a hot component update for a given edit.


⚠️ Potential issue | 🟡 Minor

Add Angular version caveat to the HMR note.

This section should explicitly mention that Angular HMR requires Angular v19+ (Angular v16–v18 disable HMR and warn at runtime), otherwise readers may infer HMR behavior is uniformly available across supported Angular versions.

Based on learnings: In apps/docs-app/docs/guides/migrating.md (PR #2226), Analog's Angular HMR requires Angular v19+ and Angular v16–v18 intentionally disable HMR with a console warning.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@apps/docs-app/docs/integrations/tailwind/index.md` around lines 127 - 131, Update the "HMR" section to add an explicit Angular-version caveat: state that Angular HMR support requires Angular v19+ and that Angular v16–v18 intentionally disable HMR and emit a runtime console warning; reference the HMR heading in apps/docs-app/docs/integrations/tailwind/index.md and, if helpful, link or cross-reference the guidance in apps/docs-app/docs/guides/migrating.md (PR `#2226`) so readers don’t assume HMR behaves the same across all supported Angular versions.

coderabbitai · 2026-04-06T13:35:39Z

packages/vite-plugin-angular/README.md

+
+The plugin supports Tailwind CSS v4 for Angular component styles, including `@apply` in `.component.css` files.
+
+See the [Tailwind CSS integration guide](/docs/integrations/tailwind) for the supported setup, including:


⚠️ Potential issue | 🟡 Minor

Use an absolute docs URL to avoid broken README navigation.

Line 97 uses /docs/integrations/tailwind, which can resolve incorrectly on GitHub/NPM README renderers.

Suggested fix

-See the [Tailwind CSS integration guide](/docs/integrations/tailwind) for the supported setup, including: +See the [Tailwind CSS integration guide](https://analogjs.org/docs/integrations/tailwind) for the supported setup, including:

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

See the [Tailwind CSS integration guide](/docs/integrations/tailwind) for the supported setup, including:

See the [Tailwind CSS integration guide](https://analogjs.org/docs/integrations/tailwind) for the supported setup, including:

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@packages/vite-plugin-angular/README.md` at line 97, Replace the relative docs link "/docs/integrations/tailwind" in the README (the markdown link text "Tailwind CSS integration guide") with an absolute docs URL (e.g. https://your-docs-site.example/docs/integrations/tailwind) so the link resolves correctly on GitHub/NPM README renderers; update the markdown link target to the canonical site URL and verify the live README renders the link correctly.

benpsnyder requested a review from brandonroberts as a code owner March 27, 2026 07:36

github-actions bot added scope:docs Documentation changes scope:platform Changes in @analogjs/platform scope:vite-plugin-angular Changes in @analogjs/vite-plugin-angular labels Mar 27, 2026

benpsnyder marked this pull request as draft March 27, 2026 07:57

benpsnyder force-pushed the fix/tailwind-csr branch from a2f2b23 to 8992050 Compare March 27, 2026 08:08

benpsnyder mentioned this pull request Apr 3, 2026

refactor: overhaul stylesheet pipeline and improve Tailwind HMR across Analog #2226

Merged

9 tasks

github-actions bot removed the scope:platform Changes in @analogjs/platform label Apr 5, 2026

benpsnyder mentioned this pull request Apr 5, 2026

[AnalogJS v3] RFC: Refactor Stylesheet Pipeline: beta vs alpha, Tailwind v4, externalRuntimeStyles, and HMR #2229

Closed

github-actions bot added scope:create-analog Changes in create-analog scope:nx-plugin Changes in @analogjs/nx-plugin labels Apr 6, 2026

benpsnyder changed the title ~~fix(vite-plugin-angular): decouple Tailwind CSS from liveReload + production support~~ fix(create-analog): align Tailwind v4 guidance with generated setup Apr 6, 2026

benpsnyder changed the title ~~fix(create-analog): align Tailwind v4 guidance with generated setup~~ fix(vite-plugin-angular): document supported Tailwind v4 setup Apr 6, 2026

benpsnyder added 3 commits April 6, 2026 09:27

fix(nx-plugin): order analog before tailwind plugin

cb34426

fix(create-analog): order analog before tailwind plugin

ae795e6

docs(vite-plugin-angular): align tailwind guidance with generated setup

8fb2979

benpsnyder force-pushed the fix/tailwind-csr branch from d36190f to 8fb2979 Compare April 6, 2026 13:29

benpsnyder changed the title ~~fix(vite-plugin-angular): document supported Tailwind v4 setup~~ chore: document supported Tailwind v4 setup Apr 6, 2026

benpsnyder marked this pull request as ready for review April 6, 2026 13:30

coderabbitai bot reviewed Apr 6, 2026

View reviewed changes


		The plugin supports Tailwind CSS v4 for Angular component styles, including `@apply` in `.component.css` files.

		See the [Tailwind CSS integration guide](/docs/integrations/tailwind) for the supported setup, including:

Uh oh!

Conversation

benpsnyder commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

Affected scope

Recommended merge strategy for maintainer [optional]

What is the new behavior?

Current diff in this PR

Test plan

Does this PR introduce a breaking change?

Other information

Uh oh!

netlify bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for analog-blog ready!

Uh oh!

netlify bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for analog-app ready!

Uh oh!

coderabbitai bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

benpsnyder commented Mar 27, 2026

Uh oh!

coderabbitai bot commented Mar 27, 2026

Uh oh!

brandonroberts commented Mar 30, 2026

Uh oh!

github-actions bot commented Apr 6, 2026

Uh oh!

benpsnyder commented Apr 6, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

benpsnyder commented Mar 27, 2026 •

edited

Loading

netlify bot commented Mar 27, 2026 •

edited

Loading

netlify bot commented Mar 27, 2026 •

edited

Loading

coderabbitai bot commented Mar 27, 2026 •

edited

Loading