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.

Applying Utility Classes

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

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.