Make the JIT plugins defined by "data" so that other languages can do JIT [also reduces boilerplate]

[LionsAd]

Tailwind is great, but there is not only the Node world, but also the PHP, Java, Go, Rust, Python, Ruby worlds.

I have been looking into Tailwind in combination with Drupal (PHP web framework based on Symfony) and the Tailwind JIT would allow me to create classes on demand based on which ones are used in content and/or on the page itself.
[To make that a little bit more clear: Drupal has a site-builder role, which allows to build a site completely without coding (after base setup) and you can define classes dynamically on various elements which cannot be easily purged then. Also our content editors love Tailwind to custom style some things ...].

DOM parsing takes a moment, but the resulting stylesheet would be tiny in comparison to most things (could be embedded directly on the page).

For that however I would need to port all the corePlugins over to PHP obviously or transpile them somehow.

However most of them are really simple and a custom "language" could define 99% of them (per my analysis).

Some examples:

• https://github.com/tailwindlabs/tailwindcss-jit/blob/main/src/corePlugins/zIndex.js is essentially a "value-template", with definitions of: ['z', 'zIndex', 'z-index'] or for width: ['w', 'width', 'width'] (Last property can be an array to support setting the value to two properties)

• createSimpleStaticUtilityPlugin is already data

• modifier template: https://github.com/tailwindlabs/tailwindcss-jit/blob/main/src/corePlugins/gridRow.js -- ['row', 'gridRow', 'grid-row'] (Essentially a value template which does not support arbitrary values)

• "asLength" template - https://github.com/tailwindlabs/tailwindcss-jit/blob/8f29e7ba194d6c959884927c36533155ba8e0de0/src/corePlugins/borderRadius.js#L6 -- essentially a value template, which calls asLength instead of asValue.

Overall while it's a very clean structure every current plugin has 90% boilerplate because everything is so clean!

You could probably put all plugin definitions inside one file and it would still look clean using this method:

var customPlugin = import customPlugin from ./corePlugins/custom.js

var corePlugins = {
  plugins: [
    'w': {type: 'value', modifier: 'width', class: 'w', css: 'width: {{ value }}'},
    'row': {type: 'modifier', modifier: 'gridRow', class: 'row', css: 'grid-row: {{ value }}'},
    'rounded': {type: 'length', modifier: 'borderRadius', class: 'rounded', css: 'border-radius: {{ value }}'},
    'custom': {type: 'custom', plugin: customPlugin},
  ],
};

(there is also asScale, but that would just use type: 'scale')

Except for customPlugin (obviously) that makes it possible for another language and even auto-complete IDEs to implement tailwind JIT generation while also reducing your boilerplate by 90%.

This would be really helpful for me.