Зміст курсу
Tailwind CSS: Styling for Modern Web Development
Tailwind CSS: Styling for Modern Web Development
Applying 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.
index
index
index
Applying Utility Classes
Adding utility classes to the class
attribute of your elements to style them.
index
index
index
Explanation
p-4
: Adds padding;bg-gray-100
: Sets the background color to light gray;rounded-lg
: Adds large rounded corners;shadow-md
: Adds a medium shadow.
h-16
: Sets the height;w-16
: Sets the width;rounded-full
: Makes the image circular;mx-auto
: Centers the image horizontally.
text-center
: Centers the text;mt-4
: Adds a top margin;text-lg
: Sets the font size;font-semibold
: Makes the text semibold;text-gray-500
: Sets the text color to gray.
mt-4
: Adds a top margin;px-4
: Adds horizontal padding;py-2
: Adds vertical padding;bg-blue-500
: Sets the background color to blue;text-white
: Sets the text color to white;rounded
: Adds small rounded corners;hover:bg-blue-700
: Changes the background color on hover.
Дякуємо за ваш відгук!