Your First Utilities
Write your first Tailwind classes for color, padding, and text.
Let us style a box using a handful of utilities. Read each class name and you can usually guess what it does.
bg-cyan-500— cyan background.text-white— white text.p-6— padding on all sides.rounded-xl— large rounded corners.text-center— center the text.
Change any value (try bg-rose-500 or p-2) and press Run again.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer colors a call-to-action button by adding bg-emerald-500 and text-white directly to the HTML element.
- A designer adds breathing room around a card by applying p-6 for internal padding without writing any CSS.
- A content author centers a page heading and bumps its size using text-center and text-2xl in the template.
More examples
Color and padding basics
bg-sky-100 sets a light background, p-4 adds uniform padding, and text-sky-800 colors the text — each class does one job.
<div class="bg-sky-100 p-4">
<p class="text-sky-800">Sky-tinted box</p>
</div>Text size and alignment
text-3xl scales font size, font-bold sets weight, text-center aligns, and text-gray-900 sets color — four utilities, zero CSS.
<h1 class="text-3xl font-bold text-center text-gray-900">
Welcome to My Site
</h1>Button with multiple utilities
Background, text color, size, weight, horizontal/vertical padding, and border radius are each controlled by a dedicated utility class.
<button class="bg-violet-600 text-white text-sm font-medium px-5 py-2 rounded">
Sign Up
</button>
Discussion