How to Add Custom or Arbitrary Values in Tailwind CSS

When designing web pages, you are often in a place where you want to use custom values in your tailwind project. TailwindCSS follows a design system by default and all the values are not part of the Tailwind design system. In such cases, you need to learn how to add your own custom values which are also called Arbitrary Values.

What are Tailwind Arbitrary values?

Arbitrary values are the custom values you want to use with TailwindCSS. For example, you want to use 21px font size, 27px margin or 43px padding etc. TailwindCSS provides an easy syntax for custom values, the syntax for custom values is [value].

Arbitrary Value for Colors in TailwindCSS

Here is an example of different arbitrary values for colors in Tailwind. You can check the demo here.

Arbitrary Value for Width and Height

Here is a simple example of different arbitrary values for width and height in Tailwind. You can check the demo here.

Arbitrary Value for Padding and Margin

The example for custom values for padding and margin is given below. You can also check the demo online.

Same as in the above examples, you can add custom values for almost everything in TailwindCSS. You just have to mention the value inside square brackets like [77px] after mentioning the property.


You can add custom values known as arbitrary values in TailwindCSS for a pixel-perfect design. Arbitrary values are a great way to achieve almost anything without writing custom CSS. Please check how to add custom colors in TailwindCSS if you need to add brand colors in your project.

Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles