TailwindCSS with Astro and Vite loading full Tailwind library

[outbound]

Environment

• Astro Version: 5.12.6
• Tailwind CSS: 4.1.11
• @tailwindcss/vite: 4.1.11
• Node Version: 22.14.0
• Package Manager: npm
• OS: Windows 11
• Build Command: npm run build

Description

When using Tailwind CSS v4 with the @tailwindcss/vite plugin in Astro, CSS is not being purged per-page. Instead, all pages get a big CSS bundle containing ALL Tailwind utilities used anywhere in the project, regardless of whether those utilities are used on the specific page.

Expected Behavior

Each Astro page should receive a CSS bundle containing only:

1. Utilities used on that specific page
2. Common utilities shared across multiple pages (in a separate shared chunk)

Example:

• Simple page with hero component: ~5-10KB CSS
• Complex page with dashboard: ~40-50KB CSS
• Shared utilities chunk: ~10-20KB CSS

Actual Behavior

Every page receives the same 103KB CSS bundle containing:

• ALL utilities used on ANY page in the project (702 unique classes)
• No differentiation between simple and complex pages
• A single component page loads the same CSS as a complex multi-component page

Example:

• I tried a simple page with ONE hero component: Got the same 103KB CSS (should be ~5KB)

Site example

https://uxrewired.com

Single basic component
https://uxrewired.com/css-test/

[wongjn]

To achieve that, you'd need separate source CSS files per page. You'd then disable automatic source detection and handpick the files that Tailwind should scan per CSS file (per page).

However, I would say this would get unweildy. Rather, The paradigm of Tailwind CSS is to have one global CSS file as you do now. Initially the CSS file size goes up quickly for a project, but after a certain size, the CSS file size mellows out. This is because as a project grows, there is more class reuse. Further, having one CSS file means that only 1 CSS file needs to be downloaded once for the site. The cache could then be used for other page visits. I see you've use compression so the transfer size is only 18KB.

[outbound]

OK understood. Just wanted to make sure I wasn't missing something obvious.