Hi @adamwathan , did anything change since february? Is there maybe now a way to compile programmatically? Or maybe are this internal apis now documented?

A typical use case I came across multiple times now: In my Backend (H3/Nitro) I want to render a Mail or PDF template as html. For this I can use Vue which renders the html as a string. For the styles I would love to use Tailwind, but it would require that I have a function (that hopefully works not just in Node, but also other environments like serverless, Deno, Bun, etc) and accepts and input (either the imported vue file or the generated html string) without use of the filesystem. This function would return the styles as a string, optionally minified etc.

With Tailwind 3 this was possible, but with Tailwind 4 I cant find the right config. I assume using post-css is the key again but I couldt make it ...

Did you find out anything?

I found a solution, I hope it works for you too.

You have to use something like jsdom or parse5 to parse your html and extract all classnames, and end with an array like this:
["bg-gray-50","p-6","rounded-lg","shadow-md","text-center","bg-[#f29101]","flex","h-16","items-center","justify-center","mb-4","mx-auto","rounded-full","w-16","h-8","text-black","w-8","font-semibold","mb-2","text-gray-900","text-xl","text-gray-600"]

Then you just need to install tailwindcss dependency, no need for postcss, and build a compiler like this:

import { compile } from "tailwindcss";
const tailwindCompiler = await compile('@import "tailwindcss";', {
 loadStylesheet: async (id: string, base: string) => {
 if (id === "tailwindcss") {
 return {
 path: "virtual:tailwindcss/index.css",
 base,
 // try to find more elegant ways of loading tailwind index.css depending on your bundler
 content: await readFile(
 "node_modules/tailwindcss/index.css",
 "utf-8",
 ),
 };
 }
 throw new Error(`can't load stylesheet id:${id} base:${base}`);
 },
});

Then you compile passing our previous list of classes, like this:

tailwindCompiler.build(["bg-gray-50","p-6","rounded-lg","shadow-md","text-center","bg-[#f29101]","flex","h-16","items-center","justify-center","mb-4","mx-auto","rounded-full","w-16","h-8","text-black","w-8","font-semibold","mb-2","text-gray-900","text-xl","text-gray-600"])

And thats it 😄

Thanks this might be something! Just wanted to add that postcss is needed to run autoprefixer and minification after tailwind

I think autoprefixer is not longer needed in v4

Why max autopefixer no longer needed?
I found react-email using Tailwind 4 and they also use the compile() function. But what they do is they scan all of their dom elements and then add all used classes manually. Posted the links below in another answer.

How does this help in a JavasScript file?