Tailwindmarkup~5 mins

Arbitrary properties for unsupported CSS in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Sometimes Tailwind CSS does not have a built-in class for a specific CSS property you want to use. Arbitrary properties let you add any CSS style directly in your HTML using Tailwind's special syntax.

You want to use a CSS property that Tailwind does not support yet.

You need a quick custom style without writing separate CSS files.

You want to keep all styles inside your HTML for easier maintenance.

You want to try a new CSS feature that Tailwind hasn't added classes for.

You want to add a unique style for a single element without clutter.

Syntax

Tailwind

class="[property:value]"

Use square brackets [ ] around the CSS property and value.

No spaces inside the brackets; use quotes if value has spaces.

Examples

This adds a scroll margin top of 2rem, which Tailwind might not have a class for.

Tailwind

<div class="[scroll-margin-top:2rem]">Content</div>

Adds a blur effect to the background behind the button.

Tailwind

<button class="[backdrop-filter:blur(5px)]">Blurred Background</button>

Applies a text shadow that Tailwind does not support by default.

Tailwind

<p class="[text-shadow:2px_2px_4px_rgba(0,0,0,0.5)]">Shadowed Text</p>

Sample Program

This example shows three uses of arbitrary properties: scroll-margin-top on a div, backdrop-filter blur on a button, and text-shadow on a paragraph. These styles are not built-in Tailwind classes but work using the arbitrary property syntax.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Arbitrary Properties Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-2xl font-bold mb-4">Arbitrary Properties in Tailwind</h1>
  <div class="[scroll-margin-top:3rem] mb-6 border p-4">
    This box has a scroll margin top of 3rem.
  </div>
  <button class="bg-blue-500 text-white px-4 py-2 rounded [backdrop-filter:blur(4px)]">
    Blurred Background Button
  </button>
  <p class="mt-6 text-lg [text-shadow:2px_2px_3px_rgba(0,0,0,0.4)]">
    This text has a shadow using an arbitrary property.
  </p>
</body>
</html>

OutputSuccess

Important Notes

Use dashes (-) instead of spaces in property names inside brackets, for example: [scroll-margin-top:1rem].

If the value contains spaces or special characters, wrap it in quotes: [content:'"Hello"'].

Arbitrary properties keep your HTML clean and avoid writing extra CSS files for small custom styles.

Summary

Arbitrary properties let you add any CSS style directly in Tailwind classes.

Use square brackets with property and value, like [property:value].

This helps when Tailwind does not have a built-in class for the style you want.