Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Tailwind CSS) expand_more

Core Utilities

Utility-first composition Spacing scale Width and height Display utilities Position utilities Z-index Overflow Object fit

Flex & Grid

Flex container Flex direction Flex wrap Justify content Align items Gap Grid columns Grid spans

Typography & Color

Font family Font size Font weight Line height Text alignment Text color Background color Opacity

Borders & Effects

Border width Border radius Ring Box shadow Gradient backgrounds Filters Backdrop filters Divide utilities

Responsive & States

Responsive variants Hover variant Focus variant Active variant Disabled variant Dark mode Group variant Peer variant

Modern Tailwind

Arbitrary values Arbitrary properties Data attribute variants ARIA variants Container queries Theme variables Custom utilities Layer directives

Tailwind CSS / Modern Tailwind

Theme variables

Learn Theme variables in Tailwind CSS with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Advanced

tailwind-css-046.html

html

<style>:root{--brand-surface:#eef6ff;--brand-text:#123}</style>
<section class="bg-[var(--brand-surface)] text-[var(--brand-text)]">Theme token utilities</section>

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Theme variables Mastery Check →

Container queries

Custom utilities