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

Зміст курсу

Tailwind CSS: Styling for Modern Web Development

Tailwind CSS: Styling for Modern Web Development

1. Introduction and Setup
2. Core Concepts and Basic Styling
3. Building Basic Components
4. Layout Basics
5. Responsiveness and Customization

bookApplying Utility Classes

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

css

index

js

index

copy

Applying Utility Classes

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

html

index

css

index

js

index

copy

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.
How do you apply utility classes to an HTML element in Tailwind CSS?

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

Виберіть правильну відповідь

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 2
some-alt