In Nitro + SSR context, purge using rendered HTML.

This issue has been tracked since 2022-11-09.

Is your feature request related to a problem? Please describe.

No, it is not related to a problem I've experienced with the module.

Note: I'm mainly spitballing here. I'm thinking about experimenting with something similar, and wanted to raise this before some more knowledgeable folks.

Describe the solution you'd like

It might be nice if you could figure out a way to purge the CSS or JIT, based on the html content available to the nitro render:html hook. Not only would CSS files be smaller, but this would actually enabled using factory patterns for building tailwindcss classnames--something you can't currently do if you want to have reasonable build sizes.

The biggest problem here would be that the postcss.process() has to take place every render. I'm not sure how significant the performance impacts of doing as much are.

From this package, it would likely need to be something that writes a ~/server/plugins/tailwindcssSsr.ts plugin. Solution with the best performance wins.

Describe alternatives you've considered

I don't think there are good alternatives.

Additional context

I'm going to ask about this in tailwindcss discussions as well.

l-monninger wrote this answer on 2022-11-11

This looks to build reasonably fast. Initial test are showing 10 - 100 ms for some of my pages.

l-monninger wrote this answer on 2022-11-11

This is sub 100 ms for me on most of my pages:

import tailwindcss from "tailwindcss"
import postcss from "postcss";
import process from "process";
import path from "path";
import fs from "fs";
import config from "../../tailwind.config.js";

// const css =  fs.readFileSync(path.join(process.cwd(), "./path/to/main.css")).toString();

export default defineNitroPlugin((nitroApp)=>{
    nitroApp.hooks.hook("render:html", async (html, { event })=>{
       const t0 =;
        const renderedCss = await postcss([
                content : [{ raw : html.body.join()}]
            fs.readFileSync(path.join(process.cwd(), "./path/to/main.css")).toString() // OR css
    const t1 =;

Loading the CSS once (in module scope)--which should be the correct way to do this in most use cases--seems to reduce hook time by about 50%.

l-monninger wrote this answer on 2022-11-16

I'm going to close this, since it really doesn't have much to do with the intent of this module. If anyone discovers any fallacious reasoning in the above though, please reach out.

More Details About Repo
Owner Name nuxt-modules
Repo Name tailwindcss
Full Name nuxt-modules/tailwindcss
Language TypeScript
Created Date 2019-04-04
Updated Date 2023-03-29
Star Count 1285
Watcher Count 12
Fork Count 157
Issue Count 57


Issue Title Created Date Updated Date