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?

[defidecap]

@dotamir did you find anything ?

My use case is wanting to have a client side package that takes the tailwind of an object(or objects), and return the css styling of a specific element. It sounds like I could have used this package prior to v4

[mehediScriptDev]

@defidecap @dotamir

v4 broke this cuz the engine is completely new (lightning css). it's not a postcss plugin in the same way anymore.

the new engine is built to scan files, it doesn't like raw html strings in the content config.

i had to write the html to a temp file and then pass that file's path to the config. kinda annoying but it works.

something like this:

import tailwindcss from 'tailwindcss'
import postcss from 'postcss'
import fs from 'fs/promises'
import path from 'path'

const html = '<div class="bg-red-300"></div>'
const tmpFilePath = path.join(__dirname, 'temp.html')

async function getCss() {
  await fs.writeFile(tmpFilePath, html)

  const result = await postcss([
    tailwindcss({
      content: [tmpFilePath],
    }),
  ]).process(`@import "tailwindcss";`, { from: undefined })
  
  await fs.unlink(tmpFilePath) // clean up
  
  console.log(result.css)
}

getCss()

[MickL]

Thanks for sharing! In general I think every solution that uses filesystem is not a good solution for two reasons: 1. Not every runtime has a filesystem (e.g. serverless workers dont) and possibly not every runtime has fs to import (possibly Bun and Deno dont)