Tool that reads a given string with html and outputs tailwind classes in an object

[LiChoi]

Request:

A tool which can read a given string that has html in it with tailwind classes and outputs the required tailwind classes in an object.

Example:

import generateTailwindClasses from "tailwindcss"; // Some tool created by tailwind team or some third party

const htmlFragment = `<div class="text-red text-[12pt]">Hello World</div>`;

genenerateTailwindClasses(htmlFragment); // Output as object: { "text-red": { color: "red" }, "text-[12pt]": { "font-size": "12pt" } }

Use case:

Templates containing html fragments are stored in database.

Pages are built from combination of templates.

Each page requires a different tailwind stylesheet depending on the tailwind classes used in its templates.

Therefore, each template needs to keep track of its own tailwind classes to be stored in database and retrieved together with the template when rendering the page. Css stylesheet for whole page will be constructed based on the css for each template.

Does such a tool already exist? If not, can it be built?

PS The play CDN https://cdn.tailwindcss.com works for this use case, but tailwind advises not to use this on production. Also, I notice that it significantly degrades the performance of the page.

[wongjn]

You could try using the PostCSS API to programmatically run Tailwind:

const postcss = require('postcss');
const tailwindcss require('tailwindcss');
const baseConfig = require('./tailwind.config');

const sourceCSS = '@tailwind base; @tailwind components; @tailwind utilities';
const config = {
  presets: [baseConfig],
  content: [{ raw: markup }],
};
postcss([tailwindcss(config)])
  .process(sourceCSS)
  .then((css) => {
    // `css` is a string of the compiled CSS.
  });

[LiChoi]

Thanks for pointing out you could use raw html markup in the config. That's exactly what I need.

I wonder if the same technique you outlined above could be used in a rails project...