Page specific tailwind classes with SSG

Question

Currently I'm developing a website using the following stack:

• vue.js
• @vue/server-renderer
• vite
• tailwind CSS

SSG was chosen as the rendering mode.

Tailwind, as described in the documentation, allows you to specify directories and file extensions (content property) , in which he will try to find the classes, in order to leave only those that are actually used in the project.

As a result, the 'main.css' file is formed, in which only those classes that are used remain. Next, I just take this file and include it in every page that was rendered during the build phase of the project.

This results in:

index.html - main.css
about.html - main.css
blog.html - main.css

It turns out that main.css file may contain classes that are needed only for one of the pages and are not needed for others.

I would like to implement the following:

1. Take main.css which turned out
2. Render a page, for examle about.html
3. take only those styles that are needed for about.html page from the main.css file
4. create a new about.css file
5. link the resulting about.css styles to about.html

I’ve already tried to implement this using an awesome PurgeCSS tool as following:

1. render page content usind @vue/server-renderer's renderToString() method;
2. Pass an resulting css and html sources to PurgeCSS here is an example

But there are too many corner cases around this solution, such as:

1. Dynamic classes which can be added to the html on the client side
2. Some components may be missing in rendered html and their content will be added later (for example, v-if directive was used on the component)

Answer 1

A few takeaways:

• PurgeCSS is not needed anymore since Tailwind v2 (the latest being v3.x)
• as far as I know, you cannot have code-splitting with Tailwind, not that it matters anyway since it will still perform okay with further optmizations
• the classes that will be generated, will be only once for the whole app (hence no need to have a bg-red-500 for index or about page, both are referencing the same unique declaration)
• if you want to have SSR/SSG, I recommend the usage of Nuxt (in it's v3 if you're using Vue3 or plan to have anything long-term)
• dynamic classes are not possible with Tailwind, you can create things like bg-[#ccc] but it goes on the opposite side of what Tailwind is achieving and should be used exceptionally
• for Tailwind's content, still the defaults on this page, section Configure your template paths, no need to do anything crazy or complicated
• if you want to have some scoped/local style, style to using style scoped, you can still use Tailwind inside of those tags tho
• if you want to write vanilla CSS into dedicated CSS files like index, about, blog etc, then Tailwind is probably not the best approach because this is not how it is supposed to work
• stay simple, the performance will still be amazing. Only focus on not having too many screens, colors etc that you're not using
• you could run some bundle size tests to see if the CSS is taking a huge chunk in terms of size. Will probably not, but if it still is: you can then start making complex configurations
• JS will be far harder to reduce and be more impactful regarding the performance (because of how a browser works with it: parsing, executing is indeed blocking the main thread)