How do I generate an arbitraty border-width utility class with TailwindCSS?-CodePudding

I have a problem. I am trying to use TailwindCSS to generate arbitrary border width classes.

It works when I do this:

"border-x-[20px]"

for example, correctly generating this:

.border-x-\[20px\] {
    border-left-width: 20px;
    border-right-width: 20px;
}

But when I try to do this:

"border-x-[var(--tri-base)]"

it incorrectly generates arbitrary colour utility instead, like this:

.border-x-\[var\(--tri-base\)\] {
    border-left-color: var(--tri-base);
    border-right-color: var(--tri-base);
}

How do I get it to generate a width utility with var() syntax?

CodePudding user response：

To generate an arbitrary border-width utility class with Tailwind CSS, you can use the @apply directive in your CSS. This directive allows you to apply a set of styles from a predefined class to a new class that you create.

For example, let's say you want to create a new class called .border-2 that applies a border width of 2px to an element. You can do this by defining the new class and using the @apply directive to apply the styles from the .border utility class, like this:

.border-2 {
  @apply .border;
  border-width: 2px;
}

This will create a new class called .border-2 that you can use in your HTML like any other class. When applied to an element, it will add a 2px border to that element.

You can use the same approach to create other border-width utility classes with different border widths. Simply replace the 2 in the class name and the 2px value in the border-width property with the desired border width, and you will have a new utility class that you can use to easily apply that specific border width to your elements.

For more information on the @apply directive and how to use it in Tailwind CSS, you can refer to the Tailwind CSS documentation.

CodePudding user response：

Try to use the "apply" directive:

.border-x-\[var\(--tri-base\)\] {
    @apply border-x-[var(--tri-base)];
}