Feature: Official API to generate CSS via external JS (useful for integrating TW-JIT into projects that don't use Node.js/WebPack)

[d4h0]

This project looks amazing!

I'm wondering if an official API for generating CSS is planned. Something like the following:

const css = generateCss("p-4 text-red-600");

I have created a template engine filter that checks if a Tailwind class exists, and throws an error if it doesn't. To do this, I parse the CSS file that Tailwind generates – so basically TW-JIT is incompatible with my validator filter (my application would fail before TW-JIT generates the CSS).

I'd like to create an alternative implementation, that calls something like generateCss directly.

After a quick glance, it seems the generateRules function does exactly that.

Is this correct?

If so: Would it be possible to support this officially?

Such an API would be useful for integrating TW-JIT with projects that don't use Node.js, without forcing them to create a full WebPack setup. I'm working on a Rust project, for example.

With the proposed API, I could create a small Node.js server that accepts requests from my Rust template engine filter. Performance would most likely be much, much better with this approach (because my filter extracts already all CSS classes, and because I could implement caching in Rust).

Basically, this would make it possible for the community (JavaScript and otherwise) to create additional dev tools, which would be fantastic.

What do you think?

[pheuter]

While not on the level of accepting strings containing just Tailwind utility classes, a similar API already exists today in the form of PostCSS, which is the underlying processor Tailwind uses in the first place:

const postcss = require('postcss');
const tailwindcss = require('@tailwindcss/jit');
const autoprefixer = require('autoprefixer');

const { css } = await postcss([tailwindcss, autoprefixer]).process(yourCss);

[d4h0]

Thanks, @pheuter!

It seems, this isn't really what I'm asking for, however.

It seems, process accepts a CSS string, but I only have Tailwind CSS classes.

To be able to use Tailwind-JIT, I'd need a function that takes Tailwind CSS classes, and returns the generated CSS (or an error if a CSS class is invalid).

With that, it would be possible to collect the CSS of a website/page, and write it to a style sheet (or display an error if a class is invalid).

[d4h0]

I think, the biggest advantage of this API would be, that people would be able to create editor/IDE plugins to validate Tailwind CSS classes (similar to what I do).

For me, it was a game changer, when I implemented my filter (before, I often mistyped a class, and was wondering why my design didn't work).

[adamwathan]

Hey! We'll likely need to expose an API like this when we add JIT support to Tailwind Play so I don't doubt we end up with something like this eventually. The API would probably be more like:

let postCssRules = generateStyles("p-4 text-red-600", tailwindConfig)

I don't think we can prioritize working on this right away though so I'm going to close it (we try to treat issues as a bugfix list and capture plans for features/improvements internally), but definitely something I expect we'll offer within a few months.