*Nakshora from Zero (Nakshora 3.0) — chapter 2 of 6.* Compose padding, color and typography from classes.

What you will build#

We style a welcome box using only utilities.

Step by step#

example
html
<div class="p-6 rounded-xl bg-blue-500 text-white">
  <h1 class="text-2xl font-bold">Hello Nakshora</h1>
  <p class="mt-2 text-blue-100">Utilities are composable declarations.</p>
</div>

Why it works#

Each class is one CSS declaration — reading markup now tells you exactly how it renders.

Try it yourself#

  • Change bg-blue-500 to bg-emerald-500
  • Increase padding to p-10
  • Add rounded-2xl

Series navigation#

tutorials/index|All tutorials · tutorials/from-zero/setup|← Set up your environment · tutorials/from-zero/responsive-basics|Responsive in ten minutes →