Tailwindmarkup~5 mins

Square bracket notation for custom values in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Square bracket notation lets you use any value you want in Tailwind styles. It helps when the default options don't fit your design.

You want a color that Tailwind doesn't have by default.

You need a specific size like width or height that is not in Tailwind's scale.

You want to add a custom margin or padding value.

You want to use a special font size or line height not included in Tailwind.

You want to apply a custom CSS property value quickly without editing config files.

Syntax

Tailwind

class="property-[value]"

Replace property with the Tailwind utility name like bg, w, m, etc.

Put your custom value inside square brackets exactly as you want it in CSS, for example [10px] or [var(--my-color)].

Examples

This sets a tomato red background and 15 pixels padding using custom values.

Tailwind

<div class="bg-[#ff6347] p-[15px]">Hello</div>

This creates a box with a width of 250 pixels and height of 100 pixels, using a default blue background.

Tailwind

<div class="w-[250px] h-[100px] bg-blue-200">Box</div>

Here, the text size and line height are set to custom rem values.

Tailwind

<p class="text-[1.75rem] leading-[2rem]">Custom text size and line height</p>

Sample Program

This page shows three elements using square bracket notation for custom colors, sizes, and spacing. You see a green box with 20px padding, an orange box sized 300 by 150 pixels, and a paragraph with custom text size and line height.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Custom Values</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen gap-6 bg-gray-50">
  <div class="bg-[#4caf50] p-[20px] rounded text-white font-semibold">
    Custom green background with 20px padding
  </div>
  <div class="w-[300px] h-[150px] bg-[#ff5722] flex items-center justify-center text-white font-bold">
    300px by 150px box
  </div>
  <p class="text-[2rem] leading-[2.5rem] text-gray-700">
    Custom font size and line height
  </p>
</body>
</html>

OutputSuccess

Important Notes

Always include the exact CSS value inside the brackets, including units like px, rem, or color codes.

Square bracket notation works with most Tailwind utilities but not all. Check Tailwind docs if unsure.

Use this to quickly try custom styles without changing your Tailwind config file.

Summary

Square bracket notation lets you add any CSS value inside Tailwind classes.

Use it when Tailwind's default values don't match your design needs.

Remember to include units and proper CSS syntax inside the brackets.