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 = performance.now();
        const renderedCss = await postcss([
            tailwindcss({
                ...config,
                content : [{ raw : html.body.join()}]
            })
        ]).process(
            fs.readFileSync(path.join(process.cwd(), "./path/to/main.css")).toString() // OR css
        );
        html.body.push(
`<style>
${renderedCss.css}        
</style>`
);
    const t1 = performance.now();
    console.log(t1-t0);
    })
});

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.

Your Name

Your Comment

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

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date