[Feature Request] Dynamic rules in configuration

[xsjcTony]

Hey, I'm not sure if there's already a way to achieve it, but here's what I want: (I've given a try by writing my own plugin, but no luck)
Basically, since I'm not a fan of arbitrary value, so instead of using mb-[13px], I would rather use mb-3.25 (simply divide by 4, to generate margin-bottom: 0.8125rem which resolve to 13px).

I want something like in UnoCSS, it can be configured by https://unocss.dev/config/rules#dynamic-rules:

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

This is my current settings... which is pretty tough, and I need to add new value if it's not set yet...

[wongjn]

You could generate the spacings you need programmatically in the Tailwind configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      spacing: Object.fromEntries(
        Array(32 * 4).fill().map((_, i) => [
          (i + 1) / 4,
          `${(i + 1) / 16}rem`,
        ])
      ),

This would generate 0.25 increments up to 32.

[xsjcTony]

Ops. I'm simply a dumb

[xsjcTony]

Through I don't think so, but will this have any performance hurt on HMR or other dev-time things?

[wongjn]

I don't know.

[xsjcTony]

Well, it's killing the IDE intellisense if I set it too large (e.g. 4000+, supporting from 0.5px to 2000px)

[xsjcTony]

The performance is what I'm concerned about, image one day if I need to use w-400, instead of making the object that large (with 1500+ key-value pairs) with the idea given by @wongjn, I'd still rather have a way to dynamically calculate it just like what UnoCSS is doing

[acalvino4]

related: #6383