Skip to content
Learn Netverks

Lesson

Step 28/32 88% through track

arbitrary-values

Arbitrary values and properties

Last reviewed May 28, 2026 Content v20260528
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
advanced

This lesson

This lesson teaches Arbitrary values and properties—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Arbitrary values and properties in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When intermediate lessons feel comfortable and you are ready for production-style trade-offs.

When the scale does not fit, JIT allows one-off values in square brackets: w-[137px], top-[117px], bg-[#1da1f2], grid-cols-[1fr_500px_2fr].

Arbitrary properties and variants

[mask-image:linear-gradient(...)] escapes rare CSS. Combine with variants: hover:[color:var(--accent)].

Use responsibly

Repeated arbitrary values signal a missing theme token—promote to theme.extend. Arbitrary values bypass design system guardrails.

Important interview questions and answers

  1. Q: Why do arbitrary values need JIT/build?
    A: Tailwind generates CSS for the exact value at compile time; infinite possibilities cannot be pre-baked.
  2. Q: Arbitrary vs inline style?
    A: Arbitraries still participate in variants (md:w-[300px]) and purge scanning; inline styles do not.

Self-check

  1. When should an arbitrary value become a theme token?
  2. Write an arbitrary width utility for 300px.

Interview prep

Risk of arbitrary-[…] classes?

They escape the design system, are easy to mistype, and may not be detected by static scanners—use tokens first.

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • Name one arbitrary value you would refuse in code review.
  • What token replaces it?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32