Conteúdo do Curso
Tailwind CSS for Web Development
Tailwind CSS for 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.
Obrigado pelo seu feedback!