runtime compilation?

[bcardarella]

We are generating stylesheets at runtime. It would be great if we had a way to just pass the list of classes & config and get the resulting stylesheet string without having to write templates to disk and use the CLI

[wongjn]

You could run PostCSS (and by extension, Tailwind) programmatically at runtime to generate the CSS.

[alex-eri]

is it suitable for v4?

[wongjn]

No, this only works for v3.

[alex-eri]

is there any way to produce css from list of classes in v4?

[wongjn]

Yes. For concrete details on how to do that, consider reverse-engineering the @tailwindcss/node, @tailwindcss/cli and/or @tailwindcss/vite packages.

[alex-eri]

import { compile } from 'tailwindcss'

import index from 'tailwindcss/index.css?raw'
import preflight from 'tailwindcss/preflight.css?raw'
import theme from 'tailwindcss/theme.css?raw'
import utilities from 'tailwindcss/utilities.css?raw'
import main from '~/assets/css/main.css?raw'

const css = {
  index,
  preflight,
  theme,
  utilities,
  main
}

{

    const candidates = ['h-48', 'bg-green-500']
    const sourceCSS = `@import "tailwindcss";`;

    let compiler = await compile(sourceCSS, {
        base: '/',
        async loadStylesheet(id,base) {
            function load() {
                if (id === 'main') {
                    return {
                        path: 'virtual:assets/css/main.css',
                        base,
                        content: css.main,
                    }
                }

                if (id === 'tailwindcss') {
                    return {
                        path: 'virtual:tailwindcss/index.css',
                        base,
                        content: css.index,
                    }
                } else if (
                    id === 'tailwindcss/preflight' ||
                    id === 'tailwindcss/preflight.css' ||
                    id === './preflight.css'
                ) {
                    return {
                        path: 'virtual:tailwindcss/preflight.css',
                        base,
                        content: css.preflight,
                    }
                } else if (
                    id === 'tailwindcss/theme' ||
                    id === 'tailwindcss/theme.css' ||
                    id === './theme.css'
                ) {
                    return {
                        path: 'virtual:tailwindcss/theme.css',
                        base,
                        content: css.theme,
                    }
                } else if (
                    id === 'tailwindcss/utilities' ||
                    id === 'tailwindcss/utilities.css' ||
                    id === './utilities.css'
                ) {
                    return {
                        path: 'virtual:tailwindcss/utilities.css',
                        base,
                        content: css.utilities,
                    }
                }

                throw new Error(`The browser build does not support @import for "${id}"`)
            }

            return load()

        },
    })
    const outcss = compiler.build(candidates)
}

Why it works? I not put outcss anywhere.

[bcardarella]

Is there somewhere in the code you could point to on how to encapsulate everything that needs to be sent to postcss?

[wongjn]

Replied at #10752 (reply in thread) to keep the reply chain together.