How to compile taiwindcss v4 programatically using esbuild (or by other means)?

[virtuallyunknown]

Greetings. I am looking to update my tooling to support tailwindcss version 4. Previously I was compiling it with esbuild via the following script which I can run from node directly (not from the command line):

import { build } from 'esbuild';
import autoprefixer from 'autoprefixer';
import { readFile } from 'node:fs/promises';
import postcss from 'postcss';
import postcssImport from 'postcss-import';
import tailwindcss from 'tailwindcss';

function postcssPlugin({ configFile }) {
    return {
        name: 'postcss-plugin',
        setup(build) {
            build.onLoad({ filter: /.\.css$/ }, async (args) => {
                const css = await readFile(args.path, { encoding: 'utf-8' });
                const result = await postcss(
                    [
                        postcssImport(),
                        tailwindcss({ config: configFile }),
                        autoprefixer()
                    ])
                    .process(css, { from: args.path })

                return {
                    loader: 'css',
                    contents: result.css
                }
            })
        }
    }
}

async function buildTailwind({ outFile, entryPoints, configFile = './tailwind.config.js' }) {
    return await build({
        entryPoints: entryPoints,
        bundle: true,
        outfile: outFile,
        plugins: [postcssPlugin({ configFile })],
    });
}

await buildTailwind({
    entryPoints: ['path/to/tailwind.css'],
    outfile: 'path/to/compiled.css'
})

Since the configuration now lives in the main tailwind.css file itself, and I also read somewhere that postcss-import is no longer needed, I am looking to migrate and update my scripts accordingly.

I can't find much if any documentation on this topic, so I am asking here for help if someone can point me in the right direction.

Also, please forgive my ignorance on the topic, but I've read in the v4 announcement post that lighting-css is now bundled within tailwind itself, or something along those lines. If I can use that directly for compilation, then I don't insist on using esbuild.

Cheers!

[wongjn]

You could consider using the CLI, either through node:child_process or taking its code as inspiration. Otherwise, you can use the @tailwindcss/postcss PostCSS plugin.

[MickL]

If I see correctly, base does not need to be set. Instead the folder to scan can be defined with @source "/some/path"; directly in the tailwind css file.

[virtuallyunknown]

I dont understand exactly, is this code working or did you make a mistake when copying it here?

I see you process tailwind.css, which should contain tailwind and its config BUT I dont see you parsing any html file/code.

Sorry, I don't understand. Why would I be processing anything other than CSS with postcss/tailwind?

Also, I read your discussion and I did not realize base must point to a directory, so thanks for that info! I don't know why none of these things are documented.

[MickL]

Tailwind is scanning your html files and only added the classes that you use in them. This is why it needs a directory, I guess the default is project root.

[virtuallyunknown]

I assumed that the plugin will detect what you @source is, which I had to setup since I am working in a monorepo, otherwise it wasn't working properly.

@import "tailwindcss" source("../src");

https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path

[piscopancer]

@wongjn postcss plugin is not working with tailwind v4 egoist/tsup#1337