[v4] APIs for integration with visual builders (design tools, visual IDEs, no-code)

[jimkyndemeyer]

Hey,

Awesome to see v4 progressing!

There's an ecosystem of visual builders around v3, and with v4 upcoming there is a need for a good migration path. Looking at the various discussions these are the areas I've come across:

• Running v4 in the browser
• APIs for parsing a class name into the new TW AST (variant, arbitrary values, etc.) instead of ad-hoc solutions
• On-demand gen of the CSS AST or CSS string given a class name
• Class name completion and validation

Running v4 in the browser

One of the current pains is the need to polyfill node APIs like the FS since v3 tries to read the preflight from disk. Ideally, v4 would provide a pluggable file system, e.g. an in-memory one, that works in a browser, and can be provided by the embedding application. I assume you'll upgrade Tailwind Playground and have had a similar challenge here.

APIs for parsing a class name into the new TW AST

Visual builder manipulate the class names, and an official solution for this in the API would be the most stable solution. Ideally, like PostCSS, we could both parse into an AST and get the resulting class name string from a modified AST.

On-demand gen of the CSS AST or CSS string given a class name

Visual builders can have 100s of design explorations or pages, and trying to generate class name for all at load is not feasible. Similar to v3's generateRules, there is a need for being able to on-demand get the CSS AST or CSS string given a Tailwind class name, and add that styling to the design tool canvas.

Class name completion and validation

Visual builders need access to the possible class names for a given theme key, e.g. to show a drop down of possible text colors to the user. The current challenge here is that the VSCode extension doesn't easily run in the browser, and polyfills/hacks are needed (I assume you felt the same challenges building TW Playground). Please consider making a browser-compatible library for this functionality that the VSCode extension and visual builders can rely on.