Runtime Tailwind CSS Compilation Not Working After v4.1 Update

[alphacode-rajinthank]

Hi Tailwind team 👋,

I’m running into issues with runtime compilation after upgrading to Tailwind CSS v4.1. Previously on v3, I used PostCSS to generate Tailwind styles dynamically at runtime based on API data (e.g., JSON themes). Here's a simplified version of my GET handler

export async function GET() {
  try {
    const tailwindInput = `
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
    `;

    const result = await postcss([
      tailwindcss({
        ...tailwindConfig,
        content: [
          ...tailwindConfig.content,
          './public/runtime-theme.json',
        ],
        corePlugins: {
          preflight: false,
        },
      }),
      autoprefixer,
    ]).process(tailwindInput, {
      from: '',
    });

    await fs.writeFile('./public/runtime.css', result.css, 'utf-8');

    return Response.json({ message: 'CSS compiled successfully' });
  } catch (error) {
    console.error('Error compiling Tailwind CSS:', error);
    return Response.json({ error: 'Failed to compile Tailwind CSS' });
  }
}

This worked fine in Tailwind v3, but now with v4.1, the same logic no longer works.

Is there something that changed in v4.1 regarding runtime usage or PostCSS integration that would cause this to break?
Are there new requirements or alternative approaches for dynamic runtime compilation with v4+?

Any guidance would be greatly appreciated!

Thanks in advance

[wongjn]

Is there something that changed in v4.1 regarding runtime usage or PostCSS integration that would cause this to break?

Yes, as the major version increment would imply, the API for the PostCSS plugin is completely different:

tailwindcss/packages/@tailwindcss-postcss/src/index.ts

Lines 50 to 56 in c5a997c

	export type PluginOptions = {
	// The base directory to scan for class candidates.
	base?: string
	// Optimize and minify the output CSS.
	optimize?: boolean | { minify?: boolean }
	}

Are there new requirements or alternative approaches for dynamic runtime compilation with v4+?

You'd want to look at using the @tailwindcss/node package. See how the other core packages use this package for examples of its API and usage. Though do be aware that the APIs are undocumented and can change without notice with any updates.

You'd want to migrate to the CSS configuration style:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) source(none);
@import "./path/to/theme.css";

@source "./public/runtime-theme.json";

[alphacode-rajinthank]

Thanks for taking the time to help — really appreciate it!

[rozsazoltan]

Related:

• https://discord.com/channels/486935104384532500/1385546555179929692
• PostCSS with TailwindCSS v4 (solution)
• PostCSS with TailwindCSS v3

[alphacode-rajinthank]

Thanks! This worked perfectly. Really appreciate the clear explanation 🙏