Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Utility Classes Basics | Section
Tailwind CSS for React Development

Utility Classes Basics

Pyyhkäise näyttääksesi valikon

Tailwind CSS provides small utility classes to control spacing, colors, and text styles directly in your markup.

Spacing

<div className="p-4 m-2">
  Content
</div>
  • p-4: adds padding inside the element;
  • m-2: adds margin outside the element.

Colors

<div className="bg-blue-500 text-white">
  Content
</div>
  • bg-blue-500: sets background color;
  • text-white: sets text color.

Text Styling

<p className="text-lg font-bold">
  Hello World
</p>
  • text-lg: increases text size;
  • font-bold: makes text bold.

Utility classes control one style at a time, and you combine them to build the final appearance.

question mark

Which statement correctly describes a Tailwind CSS utility class and its effect?

Valitse oikea vastaus

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 2

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Utility Classes Basics

Tailwind CSS provides small utility classes to control spacing, colors, and text styles directly in your markup.

Spacing

<div className="p-4 m-2">
  Content
</div>
  • p-4: adds padding inside the element;
  • m-2: adds margin outside the element.

Colors

<div className="bg-blue-500 text-white">
  Content
</div>
  • bg-blue-500: sets background color;
  • text-white: sets text color.

Text Styling

<p className="text-lg font-bold">
  Hello World
</p>
  • text-lg: increases text size;
  • font-bold: makes text bold.

Utility classes control one style at a time, and you combine them to build the final appearance.

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 2
some-alt