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.
index.html
Applying Utility Classes
Adding utility classes to the class
attribute of your elements to style them.
index.html
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.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 3.57
Applying Utility Classes in HTML
Desliza para mostrar el menú
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.html
Applying Utility Classes
Adding utility classes to the class
attribute of your elements to style them.
index.html
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.
¡Gracias por tus comentarios!