Using tailwind[-cli?] programmatically

[miwnwski]

Hi,

Loving the framework, and the fact that you're opting to try Github Discussions!
I was wondering, are there any tailwind cli docs around to consume? I would love to get a grasp on how to invoke tailwind programmatically?

The use case I have is that I want to feed tailwind CSS via a buffer, or whatever which is stored in a database until it's used to generate a static page. Would prefer not to write to disk and invoking tailwind using a spawned process.

[tlgreg]

Using postcss programmatically would probably be the solution for this instead of running the tailwindcss cli, which itself programmatically runs postcss.

[adamwathan]

Yep +1 to @tlgreg, it’s a PostCSS plug-in not really a tool by itself, so you can use it programmatically by using PostCSS programmatically 👍🏻

[l-monninger]

I'm a bit confused how this is best accomplished with raw html input. The below does not seem to detect the classnames in the html.

import tailwindcss from "tailwindcss";
// ...

await postcss([
    tailwindcss({
        ...config, // config imported from cwd
        content : [{ raw : html, extension : 'html'}] // does not recognize 
    })
]).process(
    fs.readFileSync(path.join(process.cwd(), "./path/to/main.css")).toString() // imports tailwind base components and utilities.
);

[l-monninger]

It is also does not resolve imports despite the config normally being able to do so.

[l-monninger]

Ope, nvm on the detection problem. Bad object on my end. Now just have to figure out imports.

[l-monninger]

Nvm, imports were server framework issue.

[MickL]

Dont forget to add autoprefixer to your postcss plugins array

[gkoberger]

For anyone looking for code to do this, here's what worked for me:

const tailwind = require("tailwindcss");
const postcss = require("postcss");

const html = '<div class="bg-red-300"></div>';

(async () => {
  const result = await postcss([
    tailwind({
      //...config,
      content: [{ raw: html, extension: "html" }],
    }),
  ]).process(`@tailwind base;@tailwind components;@tailwind utilities;`, {
    from: undefined,
  });
  console.log(result.css);
})();

[abbottry]

It's unfortunate this is buried in a discussion and not documented in the README -- thank you for this.

[MickL]

Dont forget to add autoprefixer to your postcss plugins array!

[dotamir]

This is not working using v4 anymore. I had to degrade to v3.
Has anyone could run it using v4?