Tailwind CLI: support string as input and output

[macmillen]

Before Tailwind 4 it was possible to use the postcss process function together with the tailwind plugin to parse raw content (strings). That allowed me to programmatically generate a stylesheet without passing in files as input. Now with the new @tailwindcss/postcss it only allows me to pass in base and optimize.

My Tailwind V3 approach:

import postcss from "postcss";
import tailwindcss from "tailwindcss";

const sourceCSS = `@tailwind base;
@tailwind components;
@tailwind utilities;`;

export const compileTailwindCSS = (content: string) =>
  postcss([
    tailwindcss({
      content: [{ raw: content, extension: "html" }],
      theme: {
        // …
      },
    }),
  ]).process(sourceCSS);

Solutions:

1. the @tailwindcss/postcss plugin supports the raw content again
2. the Tailwind CLI lets me pass in and ouput strings instead of files

[OtisTemler]

Same issue here, any solutions or work arounds?
For me the use case is to build tailwindcss server side, based on a HTML string I pass in. Worked great with v3 before.

[OtisTemler]

To answer my own question, one workaround could be to install V3 via an alias:
npm install tailwindcss-v3@npm:tailwindcss@3.4.17

And then use it like so:

import tailwindcssV3 from 'tailwindcss-v3';

  await postcss([
              tailwindcssV3({
                  content: [{ raw: editorHtml, extension: 'html' }],
                  theme: {
                     // ...
                  },
              })
          ])

But that obviously only works if the HTML string is using V3 classes.

[sam-huckaby]

Was just writing up a very similar idea!

I would be interesting to implement another flag on the CLI called something like --single-file (I'm not great at naming things) which accepts a string that is actually the html of a single template or file. The CLI can then directly parse that for classes, rather than search the code base. A second flag could then be given, something like --inline (see?) which is just a boolean check that says to print the styles to stdout instead of writing to the --output file.

This would allow the Tailwind CLI to be installed and then run in the background in another process or on the API-side at the time user-generated content is submitted. The developer could then generate the styles for that user content right away. These generated styles could then be stored in the database with a hash (for caching) alongside the content and served at the same time.

I'm not an expert in the codebase, but it seems like much of this functionality already exists. I think that it could be accomplished by just modifying the logic to scan a string instead of scan for candidates across the project when the flag is given.

I'd be happy to give it a stab if someone on the Tailwind team is interested