Dynamic Values in Tailwind 4

One of the new and important features in Tailwind 4 that was an annoying problem in previous versions is Dynamic Values.

The Problem in Tailwind 3

In Tailwind 3, you could only use predefined values. For example, you could use h-80 to set the height, but you couldn’t use h-82 or any other number not defined in the library.

The only solution was to use Arbitrary Values like this:

<div class="h-[328px]">...</div>

This made you write longer and harder-to-read code.

The Solution in Tailwind 4

Now with Tailwind 4, you can use any number you want directly! Not just with height, but with all properties that have dimensions.

<!-- All of these work now -->
<div class="w-200">...</div>
<div class="border-3">...</div>
<div class="gap-15">...</div>
<div class="p-42">...</div>
<div class="m-73">...</div>

Benefits

1. Ease of Writing

You no longer need to think “Is this number defined?” or have to use Arbitrary Values.

2. Readability

The code becomes clearer and easier to read:

<!-- Before -->
<div class="h-[284px] w-[356px] p-[18px]">...</div>

<!-- After -->
<div class="h-71 w-89 p-4.5">...</div>

3. Flexibility

You can fine-tune the design without having to modify the config file.

Important Notes

• Values are calculated based on the default system (usually 4px = 1 unit)
• You can use decimal numbers like w-12.5
• The feature is compatible with all properties that accept numeric values

Conclusion

The Dynamic Values feature in Tailwind 4 made writing faster and code cleaner, letting you focus more on design instead of thinking about technical constraints.

If you haven’t tried Tailwind 4 yet, I highly recommend trying it and seeing the difference for yourself!