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.
|
1 2 3 4 5 6 7 8 9 |
<div class="bg-[#e9e516] p-4 text-center"> <p class="text-[#6b4388]"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, recusandae. Reiciendis velit quaerat reprehenderit possimus, sapiente, doloremque, beatae iste sunt similique harum ab commodi dolore explicabo quos nemo natus animi. </p> </div> |
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.
|
1 2 3 4 5 6 7 8 9 |
<div class="bg-blue-800 w-[400px] h-[400px] text-center"> <p class="text-white"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, recusandae. Reiciendis velit quaerat reprehenderit possimus, sapiente, doloremque, beatae iste sunt similique harum ab commodi dolore explicabo quos nemo natus animi. </p> </div> |
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.
|
1 2 3 4 5 6 7 8 9 |
<div class="bg-blue-800 p-[13px] text-center"> <p class="text-white m-[21px]"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, recusandae. Reiciendis velit quaerat reprehenderit possimus, sapiente, doloremque, beatae iste sunt similique harum ab commodi dolore explicabo quos nemo natus animi. </p> </div> |
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.
Conclusion
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.