Table of Contents

    Arbitrary values

    Tailwind CSS supports arbitrary values in its utility classes, letting you use custom values that aren’t predefined in your theme. This is incredibly useful for quick prototyping or a one-off style.

    For example:

    <div class="mt-[73px] bg-[#1da1f2] p-[10px]">
  Arbitrary values are cool!
</div>

    What’s happening here:

    • mt-[73px] - Adds a custom margin-top of 73 pixels.
    • bg-[#1da1f2] - Sets the background colour to a custom hex colour (Twitter blue).
    • p-[10px] - Applies 10 pixels of padding.

    These arbitrary values allow Tailwind to maintain flexibility while keeping your HTML concise. They’re also great for experimenting with unique designs without updating your Tailwind configuration.