Arbatrary Values

What are Arbitrary Values?

Arbitrary values allow you to specify custom values for TailwindCSS utilities. For example, you can set a custom width using an arbitrary value:

<div class="w-[19px]"></div>

This sets the width of the div to 19px, which is not a predefined value in TailwindCSS.

Difference with Arbitrary Properties

Arbitrary properties allow you to define custom CSS properties directly within your classes. For example:

<div class="[width:19px]"></div>

This achieves the same result as the previous example but uses the full CSS property syntax.

When to Use Arbitrary Values

Use arbitrary values when you need precise control over your styles and the default utility classes don’t provide the necessary options. For example, if you need a specific width, height, margin, or padding that isn’t available in the default TailwindCSS configuration.

<div class="h-[19px]"></div>
<div class="m-[13px]"></div>
<div class="p-[25px]"></div>

Learn more about arbitrary values in the TailwindCSS documentation.

Avoid Overusing Arbitrary Values and Properties

Overusing arbitrary values and properties can indicate an issue with your design system. It’s better to use the utility classes provided by TailwindCSS whenever possible, as they ensure consistency and maintainability in your codebase.

<!-- Avoid this -->
<div class="w-[32.5rem] h-[18.75rem] m-[2.25rem] p-[1.125rem]"></div>

<!-- Prefer this -->
<div class="w-80 h-48 m-9 p-4"></div>

By using predefined utility classes, you can maintain a consistent design language and make your code easier to read and maintain.

Conclusion

Arbitrary values in TailwindCSS provide a powerful way to achieve precise control over your designs. However, it’s important to use them judiciously and rely on the default utility classes whenever possible to maintain consistency and readability in your codebase.