How to use Tailwind 4 programatically in JavaScript/TypeScript?

[MickL]

I am trying to use Tailwind 4 in my backend code to create dynamic results. Unfortunately I cant make it work, this is what I go so far:

import tailwindcss from '@tailwindcss/postcss';
import autoprefixer from 'autoprefixer';

const postcssResult = await postcss([
    tailwindcss({
      content: [{ raw: "<div class='text-red-500 font-bold'>Hello</div>" }]
    }),
    autoprefixer(),
  ]).process(`@import "tailwindcss"`, {
    from: undefined,
  });

  return postcssResult.css;

For content it tells me content does not exist in type PluginOptions but the bigger problem is it throws an error because it cant find the css @import "tailwindcss":

 Can't resolve 'tailwindcss'

Stackblitz: https://stackblitz.com/edit/github-u6vrxc-dfzdtw4o?file=routes%2Findex.ts

[wongjn]

You may need to set base and from properly, see #16097 (comment).

However, @tailwindcss/postcss is file-system based which means you would need to create a temporary file for the raw content and have Tailwind scan that. Otherwise, you could try to adapt the code in @tailwindcss/vite for your needs (since that does not run Tailwind in a file-based way).

[adamwathan]

You can probably just use tailwindcss or maybe @tailwindcss/node if you are willing to mess around with the internal/undocumented/not public APIs we use for everything.

Some code to poke around at:

https://github.com/tailwindlabs/tailwindcss/blob/main/packages/%40tailwindcss-browser/src/index.ts#L102-L106

https://github.com/tailwindlabs/tailwindcss/blob/main/packages/%40tailwindcss-browser/src/index.ts#L205