Named border widths

[timomihaljov-yle]

Our design system uses named border widths (sm, md, lg) and I'd like to use these same names in our Tailwind utilities (e.g. border-x-md), only referring to concrete values using the arbitrary value syntax (e.g. border-x-[13px]) to make it clear that we're stepping outside the design system knowingly and not by mistake. This was possible in v3 with custom configuration:

export default {
  theme: {
    borderWidth: {
      sm: '1px',
      md: '2px',
      lg: '3px'
    }
  },
}

Ideally I'd like to do the same thing in v4:

@theme {
  --border-*: initial;
  --border-sm: 1px;
  --border-md: 2px;
  --border-lg: 3px;
}

Unfortunately it seems that v4 only supports concrete border widths like border-x-3, and I haven't found a good workaround. Using custom properties for the names would require the quite unnatural-looking syntax border-x-(length:--border-md) while leaving the nicer syntax for concrete values, which is the opposite of what I want.

As another option I considered using @utility to define custom versions of the utilities border-*, border-x-*, etc. but writing a dozen or so utilities by hand is exactly the kind of work I'd like to avoid by using Tailwind, and it would still allow the use of classes like border-x-3, which I'd like to discourage.

Can you please consider adding a new theme variable namespace, --border-* (or --border-width-*), for this use case? I think --spacing-* sets a nice precedent: it works with arbitrary numbers by default but can be reset with --spacing-*: initial; to only work with an explicitly defined scale that may include named values.

Other than this small gripe, I'm very pleased with v4 and how seamlessly it integrates with vanilla CSS. Thank you for the great work you've done with Tailwind!

[wongjn]

If it helps, you can defined named border-widths using the --border-width namespace:

@theme {
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 3px;
}

https://play.tailwindcss.com/EoeDjcHUqB

[timomihaljov-yle]

Thank you, that's exactly what I was asking for! I didn't know this namespace exists because it seems to be missing from the documentation.

It doesn't seem to support disabling its default behavior with --border-width-*: initial; like --spacing does, but the important thing is that this way design tokens are as easy to use as arbitrary values.

[ShaneYu]

This is great, but having it still provide the built-in ones like border-1, border-2 etc is not ideal. We have a specific set of named border widths that we want to enforce (after all it's a design system) and so being able to disable the default ones would be very much appriciated.

[phaux]

Too bad it only works with border utilities but not ring and outline :/

[wongjn]

You'd use --ring-width-<name> for ring and --outline-width-<name> for outline.

[phaux]

You'd use --ring-width-<name> for ring and --outline-width-<name> for outline.

That's useful!

I wonder how many more hidden features are there. I already started looking into the source code 😆