Square bracket notation for custom values in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is square bracket notation in Tailwind CSS?

Square bracket notation lets you use custom CSS values directly in Tailwind classes, like bg-[#ff6347] for a custom background color.

beginner

How do you write a custom width of 37 pixels using square bracket notation?

You write it as w-[37px]. This tells Tailwind to apply a width of exactly 37 pixels.

intermediate

Can you use square bracket notation for any CSS property in Tailwind?

Yes, as long as Tailwind supports that property, you can use square brackets to add any valid CSS value, like text-[1.25rem] or mt-[10vh].

beginner

Why is square bracket notation useful in Tailwind CSS?

It lets you quickly add unique styles without editing config files or writing extra CSS, keeping your code simple and fast.

beginner

Example: What does text-[20px] do in Tailwind?

It sets the font size to exactly 20 pixels, overriding default sizes.

How do you set a custom background color #123abc using Tailwind's square bracket notation?

A bg-#123abc

B bg{123abc}

C bg(123abc)

D bg-[#123abc]

Square bracket notation requires brackets around the value, so bg-[#123abc] is correct.

Which of these is a valid Tailwind class for a custom margin of 15 pixels?

A m-[15px]

B margin-15px

C m-15

D m(15px)

Tailwind uses square brackets for custom values, so m-[15px] is valid.

Can you use square bracket notation to set a custom font size of 2rem?

A Yes, use <code>text-[2rem]</code>.

B No, Tailwind only allows predefined sizes.

C Yes, but only in the config file.

D No, you must write custom CSS.

Square bracket notation lets you set any valid CSS value inline, like text-[2rem].

What happens if you write w-[50] without units in Tailwind?

A It sets width to 50 percent.

B It sets width to 50 pixels.

C It causes an error or is ignored.

D It sets width to 50 em.

CSS values need units; without units like px or %, Tailwind ignores or errors on the value.

Which Tailwind class sets a custom padding of 3.5rem using square bracket notation?

A padding-3.5rem

B p-[3.5rem]

C p-3.5

D p(3.5rem)

Square bracket notation with units is p-[3.5rem].

Explain how square bracket notation works in Tailwind CSS and why it is helpful.

Think about how you add unique styles without extra CSS files.

Give three examples of Tailwind classes using square bracket notation for different CSS properties.

Use brackets with values like colors, px, rem units.