Description:
Tailwind CSS is currently loaded via CDN as a workaround because setting up a proper build pipeline was not feasible with the old Hugo version and the old Tailwind v3 approach. The CDN method loads the complete Tailwind library on every page visit regardless of what styles are actually used, which has a significant negative impact on page load performance — particularly on mobile connections.
Hugo v0.128+ introduced native built-in support for Tailwind CSS v4 directly within Hugo's asset pipeline. This is a major simplification over the old approach — there is no longer any need for postcss.config.js, tailwind.config.js, or a complex npm build setup. A single CSS file and a small addition to hugo.yaml is all that is required.
Problems to Fix:
-
Performance:
- The full Tailwind CSS library is loaded on every page, including all styles that are never used on the site
- This adds unnecessary weight to every page load
-
No purging of unused styles:
- With the CDN approach there is no way to remove unused CSS — the entire library is always delivered to the visitor
-
Development vs. production inconsistency:
- Styles available via CDN may differ from what a proper Tailwind build would produce, making it harder to develop reliably
-
RTL layout risk:
- The Persian version of the site relies on RTL-specific styles. Moving away from CDN requires confirming these styles are preserved in the built output.
Tasks:
Prerequisites:
Issues #56 , #57 , and #58 must be completed before starting this issue.
Expected Outcome:
The production HTML should contain no CDN references for Tailwind. The built CSS should include only the classes actually used across the site. Page load times should improve measurably. Both language versions should render identically to how they appeared with the CDN, with no visual regressions.
Description:
Tailwind CSS is currently loaded via CDN as a workaround because setting up a proper build pipeline was not feasible with the old Hugo version and the old Tailwind v3 approach. The CDN method loads the complete Tailwind library on every page visit regardless of what styles are actually used, which has a significant negative impact on page load performance — particularly on mobile connections.
Hugo v0.128+ introduced native built-in support for Tailwind CSS v4 directly within Hugo's asset pipeline. This is a major simplification over the old approach — there is no longer any need for
postcss.config.js,tailwind.config.js, or a complex npm build setup. A single CSS file and a small addition tohugo.yamlis all that is required.Problems to Fix:
Performance:
No purging of unused styles:
Development vs. production inconsistency:
RTL layout risk:
Tasks:
<link>tag from the base templatehugo.yamlto enable build stats so Hugo can detect which classes are in usePrerequisites:
Issues #56 , #57 , and #58 must be completed before starting this issue.
Expected Outcome:
The production HTML should contain no CDN references for Tailwind. The built CSS should include only the classes actually used across the site. Page load times should improve measurably. Both language versions should render identically to how they appeared with the CDN, with no visual regressions.