Although you've directed your comment above to Sarah, I thought I'd interject with some tips that may be helpful. Firstly, optimising CSS in this instance probably has more to do with TailwindCSS than with Hugo. So here are just a few things that have helped me:
TailwindCSS allows you to use PurgeCSS to remove styles that aren't being used. Writing purgeable HTML helps the purge process. You can configure PurgeCSS in your tailwind.config.
I often find that I tend to use a custom colour palette in most of the sites I design and build, so I avoid extending the Tailwind colours and just use custom colours in my config, instead
This is a useful starting point! To add, the official Hugo docs show how to purge CSS with PostProcess. I was able to optimize my Tailwind styles without modifying the Tailwind config, but Div Rhino's suggestions can help you optimize further.
Here are the steps in code. These details are also in the link above to the Hugo docs:
Add configuration writeStats = true. If successful, this will write a hugo_stats.json file at the root of your theme or site.
Add PurgeCSS with a custom extractor to your PostCSS config. The custom extractor will use the class names extracted by the hugo_stats.json and glob patterns to find your layout files to optimize Tailwind styles.
Add a pipe to apply resources.PostProcess in the layout file where you define your styles.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hello Kareem,
Although you've directed your comment above to Sarah, I thought I'd interject with some tips that may be helpful. Firstly, optimising CSS in this instance probably has more to do with TailwindCSS than with Hugo. So here are just a few things that have helped me:
PurgeCSS
in yourtailwind.config
.floats
. So being able to remove floats and similar features is very handy.The tailwind docs have more useful optimisations.
Hope this is a useful starting point. :) 🍍
This is a useful starting point! To add, the official Hugo docs show how to purge CSS with PostProcess. I was able to optimize my Tailwind styles without modifying the Tailwind config, but Div Rhino's suggestions can help you optimize further.
Here are the steps in code. These details are also in the link above to the Hugo docs:
First, in your config file:
Next, in your PostCSS config file:
Lastly, in your layout file (
layouts/_default/baseOf.html
or a style partial):To walk through what's happening here:
writeStats = true
. If successful, this will write ahugo_stats.json
file at the root of your theme or site.hugo_stats.json
and glob patterns to find your layout files to optimize Tailwind styles.resources.PostProcess
in the layout file where you define your styles.