My infinity custom width spacing plugin.

[rockmandash]

My design system has a lot of custom width values, height is enough for me right now.

So I ended up overriding the default w- in custom plugins.

I still don't know if this is good, or should I generate lots of spacing for now.

Here is my plugin, it can cover all the Tailwind CSS 2.0 default value plus w-123/234 or w-12345 whatever you want, and will warn if number division goes wrong.

const namedWidthMapping = {
  auto: "auto",
  px: "1px",
  full: "100%",
  screen: "100vw",
  min: "min-content",
  max: "max-content",
};

export const customPlugin = {
  w: (parts) => {
    try {
      const firstPart = parts[0];

      if (namedWidthMapping[firstPart]) {
        return { width: namedWidthMapping[firstPart] };
      }

      if (firstPart.includes("/")) {
        const [numerator, denominator] = firstPart.split("/");

        return { width: `${numerator / denominator}%` };
      }

      return { width: parts[0] / 4 + "rem" };
    } catch (error) {
      console.warn(error);
    }
  },
};

// in the setup method

import { setup } from "twind";
import { customPlugin } from "./customPlugin";

setup({
  plugins: {
    w: customPlugin.w,
  },
});

[sastan]

This is a good use case for a custom plugin. We have a so called play mode on the roadmap that would do that for all theme values (based on code from the predecessor beamwind).

The play mode would be implemented something like this:

import { warn } from 'twind'

setup({
  mode: {
   ...warn,

   unknown(section, key, optional, context) {
     if (section === 'width' && key) {
       // Your translation code
       return translatedKey
     }

     return warn.unknown(section, key, optional, context)
   },
 }
})

See https://github.com/kenoxa/beamwind/blob/main/packages/preset-play/src/play.ts for how it has been implemented in beamwind. Something like that will be available sometime in twind.

[rockmandash]

Thank you for these great resources!

[lukejacksonn]

This is a cool use of plugins.. in fact @sastan used to have a very similar implementation in Beamwind once upon a time. We removed it in Twind in order to stay Tailwind compliant out of the box.. but this is a very good example of the cool stuff you can do with a runtime approach!

Great work 🌟

[rockmandash]

Thank you!
I'll keep making other useful plugins!