Arbitrary properties for unsupported CSS in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are arbitrary properties in Tailwind CSS?

Arbitrary properties let you write any CSS style directly inside Tailwind classes using square brackets, even if Tailwind doesn't support that style by default.

beginner

How do you write an arbitrary property for backdrop-filter: blur(5px); in Tailwind?

Use <code>[backdrop-filter:blur(5px)]</code> as a class to apply <code>backdrop-filter: blur(5px);</code>.

intermediate

Why use arbitrary properties instead of custom CSS files?

They keep all styles in one place, make quick changes easy, and keep your code consistent with Tailwind's utility-first approach.

intermediate

What syntax must you use to include spaces or special characters inside arbitrary properties in Tailwind?

You put the entire CSS value inside square brackets, and if it has spaces or special characters, you keep them as is, for example: bg-[url('image.png')].

intermediate

Can you use arbitrary properties with responsive prefixes in Tailwind?

Yes! For example, md:[--my-var:10px] applies the custom property only on medium screens and up.

How do you write an arbitrary CSS property for border-radius: 12px; in Tailwind?

A br-[12px]

B border-radius-[12px]

C rounded-[12px]

D radius-[12px]

The correct Tailwind syntax for arbitrary border-radius is rounded-[12px].

Which of these is a valid arbitrary property class in Tailwind?

A text-[color=blue]

B text-[color:blue]

C text-[blue]

D text-[color blue]

text-[color:blue] is valid and applies color: blue;.

Can you use arbitrary properties for CSS variables in Tailwind?

A Yes, for example <code>[--my-var:10px]</code>.

B No, Tailwind does not support CSS variables.

C Only with plugins.

D Only in custom CSS files.

Tailwind supports arbitrary properties including CSS variables like [--my-var:10px].

What happens if you write an invalid arbitrary property in Tailwind?

A Tailwind ignores it and no style is applied.

B It breaks the whole CSS build.

C It applies a default style.

D It throws a browser error.

Invalid arbitrary properties are ignored and do not apply any style.

How do you apply an arbitrary property only on large screens in Tailwind?

A property:lg-[value]

B [lg:property:value]

C property:[lg:value]

D lg:[property:value]

Use the responsive prefix before the arbitrary property, like lg:[property:value].

Explain how arbitrary properties work in Tailwind CSS and why they are useful.

Think about how you can add CSS that Tailwind doesn't have built-in.

Describe how to write an arbitrary property with spaces or special characters in Tailwind CSS.

Remember the syntax uses brackets to hold the entire CSS value.