Production CSS generation and size
Tailwind's source-driven generation helps keep the stylesheet focused on the utilities used by the project. Production size still depends on source discovery, custom CSS, plugins, and how the app imports styles. Avoid assuming that adding a large utility framework means every possible rule ships to every user.
Load CSS through the normal application build pipeline, avoid duplicating the same stylesheet through multiple entry points, and inspect the production bundle when CSS size matters. Measure before optimizing; unused custom CSS and duplicated assets can be as relevant as framework output.
Specifications & Requirements
- Primary goal:
Ship only required styles and assets - Measure:
Production CSS bundle and page load - Avoid:
Duplicate global CSS imports
Knowledge Check
What is the best first step when investigating a large production stylesheet?