tailwind-csstailwind-css-4

--border-style-* namespace doesn't work like the --border-width-* namespace; custom border-style values cannot be declared by @theme

I know that with --border-width-* I can declare custom sizes using descriptive names like md or xl instead of numbers.

Similarly, I intended to add my custom style using --border-style-* (since I noticed the logic that --border-width-* actually manages the native CSS border-width value), so it seemed consistent that the --border-style-* namespace would correspond to the native CSS border-style property. However, it doesn't work as expected.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --border-style-inset: inset; /* not working */
  --border-style-custom: dashed double none dotted; /* not working */
  --border-width-md: 20px; /* working */
  --border-width-xl: 30px; /* working */
}
</style>

<div class="flex">
  <div class="border-dotted border-md border-emerald-500 size-40 bg-emerald-100 m-2">dotted (working) & md (working)</div>
  <div class="border-inset border-xl border-sky-500 size-40 bg-sky-100 m-2">inset (not working) & xl (working)</div>
  <div class="border-custom border-md border-orange-500 size-40 bg-orange-100 m-2">custom (not working) & md (working)</div>
</div>

Solution

  • Yes, this is an undocumented part of TailwindCSS. In general, these undocumented namespaces have been created for all width-related values.

    It's interesting that border-style doesn't actually work as expected, but with the use of @utility, this custom namespace can easily be created for our purposes.

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --border-style-inset: inset; /* working */
  --border-style-custom: dashed double none dotted; /* working */
  --border-width-md: 20px; /* working */
  --border-width-xl: 30px; /* working */
}

@utility border-* {
  border-style: --value(--border-style-*);
}
</style>

<div class="flex">
  <div class="border-dotted border-md border-emerald-500 size-40 bg-emerald-100 m-2">dotted & md</div>
  <div class="border-inset border-xl border-sky-500 size-40 bg-sky-100 m-2">inset & xl</div>
  <div class="border-custom border-md border-orange-500 size-40 bg-orange-100 m-2">custom & md</div>
</div>

    Note: The developer needs to ensure that custom style and width names for borders are created consistently. Two names cannot conflict with each other, because in that case it would be impossible to determine whether it's referring to the style or the width.