Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Applying Utility Classes in HTML | Core Concepts and Basic Styling
Tailwind CSS for Web Development

book
Applying Utility Classes in HTML

To use utility classes in Tailwind CSS, you add them to the class attribute of your HTML elements. Each class corresponds to a specific CSS rule, making it easy to understand and manage your styles directly in your HTML.

HTML Structure

Start with a basic HTML structure.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Applying Utility Classes - Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/615567da-b053-4674-b89c-053057d2bca7/section-2/butterfly.jpeg"
alt="Butterfly"
/>
<div>
<p>Butterfly - Painted lady</p>
<p>
They are migratory. Starting in early Spring, they journey from Africa to Europe to the
United Kingdom and eventually the Arctic Circle.
</p>
</div>
<button>Follow</button>
</div>
</body>
</html>

Applying Utility Classes

Adding utility classes to the class attribute of your elements to style them.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Applying Utility Classes - Example 2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="p-4 bg-gray-100 rounded-lg shadow-md">
<img
class="h-16 w-16 rounded-full mx-auto"
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/615567da-b053-4674-b89c-053057d2bca7/section-2/butterfly.jpeg"
alt="Butterfly"
/>
<div class="text-center mt-4">
<p class="text-lg font-semibold">Butterfly - Painted lady</p>
<p class="text-gray-500">
They are migratory. Starting in early Spring, they journey from Africa to Europe to the
United Kingdom and eventually the Arctic Circle.
</p>
</div>
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">
Follow
</button>
</div>
</body>
</html>

Explanation

  1. p-4: Adds padding;

  2. bg-gray-100: Sets the background color to light gray;

  3. rounded-lg: Adds large rounded corners;

  4. shadow-md: Adds a medium shadow.

  1. h-16: Sets the height;

  2. w-16: Sets the width;

  3. rounded-full: Makes the image circular;

  4. mx-auto: Centers the image horizontally.

  1. text-center: Centers the text;

  2. mt-4: Adds a top margin;

  3. text-lg: Sets the font size;

  4. font-semibold: Makes the text semibold;

  5. text-gray-500: Sets the text color to gray.

  1. mt-4: Adds a top margin;

  2. px-4: Adds horizontal padding;

  3. py-2: Adds vertical padding;

  4. bg-blue-500: Sets the background color to blue;

  5. text-white: Sets the text color to white;

  6. rounded: Adds small rounded corners;

  7. hover:bg-blue-700: Changes the background color on hover.

question mark

How do you apply utility classes to an HTML element in Tailwind CSS?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 2

Chieda ad AI

expand
ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

some-alt