Building and Styling UI Components Using Tailwind CSS
Learn how to build and style UI components effortlessly with Tailwind CSS. Discover tips for creating modern, responsive, and visually stunning designs.
Vinish Bhaskar
4 Jun 2026
Building UI components with traditional CSS can get messy fast. One button style turns into three variants.
Then five overrides
Then a stylesheet nobody wants to touch.
Tailwind CSS takes a different approach.
Instead of writing custom CSS for every component, you build directly with utility classes.
In this tutorial, we will build core UI components, including buttons, forms, navigation bars, and cards. We will also cover responsive styling, component customization, and interactive states such as hover and focus.
The goal isn't just to make components look beautiful. It's to make them easier to maintain, reuse, and adapt across projects.
Tailwind UI Components
Components are reusable elements of a user interface for any web app.
Common examples are Buttons, forms, navigation menus, cards, and modals.
Instead of creating these components each time, you can reuse them across different pages and screens.
This helps keep your UI consistent and makes it easier to update as the project grows.
Why use components?
Components help you:
- Keep a consistent design across your application
- Reduce repeated code
- Update UI elements more easily
- Organize large interfaces into smaller parts
- Reuse the same patterns across projects
Tailwind makes component styling straightforward. Utility classes handle colors, spacing, typography, layouts, and responsive behavior directly in the markup, so you don't need to write large amounts of custom CSS.
If you want to move faster, component libraries like Tailgrids, Headless UI, and shadcn/ui provide ready-made components. For example, Tailgrids includes 600+ pre-built React UI components and templates built with Tailwind CSS.
Building common UI components
When developing a website or application, it's common to encounter certain UI components that are widely used across different projects. In this section, we'll explore the process of building four standard UI components: buttons, forms, navigation, and image cards.
1. Button Components
Buttons are important elements on websites that allow users to perform actions. Tailwind CSS makes it easy to create customizable buttons. Here's a simple guide to creating buttons with Tailwind CSS:
Step 1: Set up the HTML structure:
Start by adding a button element to your HTML code:
<button> Click Me </button>Step 2: Apply Tailwind CSS classes:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click Me
</button>To style the button, we use Tailwind CSS utility classes. In the above example, classes like bg-blue-500 set the background color, hover:bg-blue-700 adds a different color on hover, text-white sets the text color, font-bold makes the text bold, py-2 adds vertical padding, px-4 adds horizontal padding, and rounded gives the button rounded corners.
Step 3: Customize the button:
Tailwind CSS offers many utility classes for customization. You can change the button's size by adjusting the padding classes (py-2 and px-4), or modify the colors by selecting different classes from the color palette.
2. Form Components
Form elements like input fields, checkboxes, and select menus are crucial for collecting user input. With Tailwind CSS, we can easily style these form components. Here's a guide on building form elements using Tailwind CSS:
We will create a contact form with a name and email field and a submit button.
Step 1: Set up your HTML file: Create an HTML file with the necessary structure for the form. Make sure to include the Tailwind CSS link in the head section. You can use the CDN link or download the Tailwind CSS file and link it locally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add the link to your Tailwind CSS file here -->
<!-- <link href="path/to/your/tailwind.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<title>Contact Form</title>
</head>
<body>
<div>
<h2>Contact Form</h2>
<form action="#" method="POST">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>Step 2: Create the form container:
Inside the <body> tag, create a <div> element to serve as the container for the form. Use the container class to center the form on the page. Also, add a utility class in the body tag for the background color.
<body class="bg-gray-500">
<div class="container mx-auto mt-14 p-6 bg-white rounded shadow-md max-w-md">
<!-- Form content goes here -->
</div>
</body>Step 3: Add utility classes to the form header:
Within the form container, add a utility class to the heading for the form. We'll use the text-2xl class to set the font size to extra-large and font-bold to make it bold.
<body class="bg-gray-100">
<div class="container mx-auto my-10 p-6 bg-white rounded shadow-md max-w-md">
<h2 class="text-2xl font-bold mb-4">Contact Form</h2>
<!-- Form content goes here -->
</div>
</body>Step 4: Add utility class to the form :
Now, add the utility class to the form element with two input fields for name and email. We'll use the mb-4 class to add a margin at the bottom of each input field.
<form action="#" method="POST">
<div class="mb-4">
<label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
<input type="text" name="name" id="name" class="w-full py-2 px-3 border border-gray-300 rounded focus:outline-none focus:shadow-outline" required>
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
<input type="email" name="email" id="email" class="w-full py-2 px-3 border border-gray-300 rounded focus:outline-none focus:shadow-outline" required>
</div>
<!-- submit button goes here -->
</form>Step 5: Add the submit button:
Finally, add utility to the submit button in the form. We'll style it with a blue background color using the bg-blue-500 class, and it will change to a darker shade on hover with the hover:bg-blue-700 class. The text color is set to white using text-white, and font-bold makes the text bold. We'll also add py-2 for vertical padding and px-4 for horizontal padding. The rounded class gives the button rounded corners.
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>Step 6. Customize the form components:
You can customize form components using Tailwind CSS utility classes. Adjust the size, colours, spacing, and alignment to match your design.
Here is a live Tailwind CSS playground with the code for the Form Component: https://play.tailwindcss.com/sBuKSCAaaC.
In this playground, you can interact with and modify the code for the Form Component to see how different changes affect its appearance and functionality.
3. Navigation Components
Tailwind Navbar components and menus help users navigate through a website or app. Tailwind CSS provides techniques for creating responsive navigation components. Here's a simple overview:
Steps to create a navigation component using Tailwind CSS
Step 1: HTML structure for a navigation bar:
<body class="bg-gray-500">
<nav class="w-full px-8 bg-purple-700 text-white py-4">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<!-- Navigation content goes here -->
</div>
</div>
</nav>
</body>Step 2: Apply Tailwind CSS classes and add content:
This code creates a navigation bar with a purple background, a profile image, and a name. The navigation menu items are hidden on small screens and revealed as a responsive hamburger menu. Tailwind CSS utility classes are used to style and arrange the elements with simplicity and responsiveness.
Link to live code playground of the Navigation component
<body class="bg-gray-500">
<nav class="w-full px-8 bg-purple-700 text-white py-4">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center">
<img class="rounded-full h-8 w-8 mr-2 md:h-12 md:w-12" src="https://cdn.pixabay.com/photo/2014/04/02/17/07/user-307993_1280.png" alt="Profile Image">
<h1 class="text-2xl font-bold ">Sophia Johnson</h1>
</div>
<ul class="md:flex space-x-8 hidden text-xl font-semibold">
<li><a href="#" class="cursor-pointer hover:underline">About Me</a></li>
<li><a href="#" class="cursor-pointer hover:underline">Projects</a></li>
<li><a href="#" class="cursor-pointer hover:underline">Resume</a></li>
<li><a href="#" class="cursor-pointer hover:underline">Contact</a></li>
</ul>
<div class="md:hidden">
<a class="text-4xl font-semibold" href="#">≡</a>
</div>
</div>
</nav>
</body>In the code snippet above, the navigation bar is styled with Tailwind CSS utility classes. Here's a breakdown of the key utility classes used:
- bg-purple-700: Sets the background color of the navigation bar to a shade of purple (#6B46C1).
- w-full: Makes the navigation bar span the full width of its parent container.
- px-8: Adds horizontal padding of 2rem (8px) on both sides of the navigation bar.
- text-white: Sets the text color inside the navigation bar to white.
- py-4: Adds vertical padding of 1rem (4px) to the navigation bar.
The navigation content is organized using flexbox:
- container: Horizontally centers the navigation content using a max-width and automatic left and right margins.
- flex: Applies a flexbox layout to the container's content.
- items-center: Vertically aligns the navigation content at the center.
- justify-between: Distributes the navigation content evenly, pushing elements to the edges horizontally.
Within the navigation content:
- A profile image is displayed with a rounded shape using the rounded-full class. With height and width of 2rem (8px) and 3rem (12px) on medium-sized screens and above (md breakpoint) using h-8, w-8, md:h-12, and md:w-12.
- Font size of 1.5rem (24px) using text-2xl and bold using font-bold.
For responsive design:
- The navigation menu items are hidden on small screens using the hidden class and revealed on medium-sized screens and above using md:flex.
- Menu items are horizontally spaced using space-x-8.
- The "About Me", "Projects", "Resume", and "Contact" links display an underline when hovered over, accomplished using hover:underline.
- A hamburger menu icon with three lines (≡) is displayed on small screens using md:hidden and is styled with a font size of 4rem (64px) and bold using text-4xl and font-semibold.
By customizing these utility classes, you can easily adjust the appearance and responsiveness of the navigation bar to fit your specific design preferences and requirements.
You can find the live Tailwind CSS playground showcasing the Navigation Component at https://play.tailwindcss.com/I8bFrvr9cZ.
Feel free to explore the Navigation Component in the playground and experiment with its design and functionality.
4. Card with Image Component
A card component with an image is a common UI component used to display information or content in a visually appealing way. Creating a card with an image is straightforward using Tailwind CSS. Here's a simple guide:
Step 1: Set Up the HTML Structure. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Component with Image</title>
<!-- Add the link to your Tailwind CSS file here -->
<link href="path/to/your/tailwind.css" rel="stylesheet">
</head>
<body>
<div>
<div>
<img>
<div>
<div>Card Title</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>Step 2: Include Tailwind CSS In the <head> section of your HTML file, add the link to the Tailwind CSS file. You can either use the CDN link or link to a local Tailwind CSS file. Make sure to replace "path/to/your/tailwind.css" with the actual path to your Tailwind CSS file.
Step 3: Create the Card Component
Now, let's create the card component with an image.
<div class="max-w-sm rounded-lg overflow-hidden shadow-md bg-white">
<img class="w-full" src="path/to/your/image.jpg" alt="Card Image">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">Project Name</div>
<p class="text-gray-700 text-base">Project Descriptipn: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>Step 4: Customize the Card
The card is represented by a <div> element with classes max-w-sm, rounded-lg, overflow-hidden, shadow-md, and bg-white. These classes give the card a rounded shape, hide overflowing content, add a shadow effect, and set a white background.
Step 5: Add an Image
<div class="container mx-auto mt-8">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-slate-100">
<img class="w-full" src="path/to/your/image.jpg" alt="Card Image">
<div class="px-6 py-4">
<div class="font-bold text-2xl mb-2">Card Title</div>
<p class="text-gray-900 text-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>Inside the card, you'll find an <img> element with the class w-full. The w-full class ensures that the image takes up the full width of the card container. Replace "path/to/your/image.jpg" with the actual path to your image file.
Step 6: Card Content
The card content, such as the title and description, is placed within a <div> with classes px-6 and py-4. The px-6 class adds horizontal padding, and py-4 adds vertical padding.
Step 7: Customize Card Content
Within the card content <div>, you'll find a title and a paragraph. The title is represented by a <div> element with classes font-bold and text-xl, making it bold and setting the font size to extra-large.
The paragraph is represented by a <p> element with classes text-gray-700 and text-base. The text-gray-700 class sets the text color to a shade of gray (#4A5568), and text-l sets the font size.
Step 8: Preview and Customize
Open the HTML file in your browser to preview the card component with the image. You can further customize the card's appearance by applying more Tailwind CSS utility classes, changing colors, adjusting padding, and adding more content as needed.
Here is a live Tailwind CSS playground featuring the Card Component with an image: https://play.tailwindcss.com/l7LSUVx3PL.
In this playground, you can explore the Card Component with an image and experiment with its layout and styling to see how it looks with different changes.
With these steps, you've successfully created a basic card component with an image using Tailwind CSS. Utility classes make it simple to style and customize components, allowing us to create visually appealing and responsive designs without writing custom CSS."
We will use these components for building our portfolio in this tutorial series. These components will help us create a professional, visually appealing portfolio that effectively showcases our skills and projects.
Styling components with utility classes and customizations
Utility classes in Tailwind CSS are simple and specific CSS classes that provide specific styling properties. They're easy to use and can be combined to create different looks for your components. Each utility class focuses on a specific aspect of styling, such as colors, typography, spacing, or positioning.
For example, let's say you want to change the color of a text element to red. In Tailwind CSS, you can apply the text-red-500 class to the element, where the text indicates the utility class for text styling, red specifies the color, and 500 represents the shade or intensity of the color. This makes it easy to quickly apply styles without writing custom CSS.
Applying Utility Classes to Style Components:
To style components using utility classes, you can directly apply the relevant classes to the HTML elements that make up the component.
Let's consider the above button component as an example:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click Me
</button>In the code snippet above, the button element has several utility classes applied. The bg-blue-500 class sets the background color to blue; hover:bg-blue-700 changes it when the button is hovered; text-white sets the text color to white; font-bold makes the text bold; py-2 adds vertical padding; px-4 adds horizontal padding; and rounded gives the button rounded corners.
Similarly, in Card with Image Component :
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="image.jpg" alt="Card Image">
<div class="px-6 py-4">
<!-- Card content goes here -->
</div>
</div>In the code snippet above, the card with an image component is styled using Tailwind CSS utility classes. The max-w-sm class sets the maximum width of the card, rounded gives it rounded corners, overflow-hidden hides any content that exceeds the card's boundaries, shadow-lg adds a shadow effect, w-full makes the image fill the card's width, px-6 adds horizontal padding to the card's content, and py-4 adds vertical padding to the card's content.
By combining and customizing utility classes, we can easily style various components in Tailwind CSS.
Utilizing Utility Class Variations for Different Component States:
It provides utility classes that let us style components differently based on states like hover, focus, or active. These classes are prefixed with state-specific keywords.
For instance, to change the background color of a button when it is hovered over by the user, you can use the hover:bg-blue-700 class. This will modify the background color to a darker shade of blue when the button is hovered over. Similarly, we can use focus:outline-none to remove the outline around a button when it is focused, resulting in a cleaner appearance.
By leveraging these utility class variations, you can easily enhance the interactivity and visual feedback of your components in response to user interactions.
We can even use our custom utility classes for customization. We have already covered this topic in the previous chapter on 'Customization' in A Comprehensive Guide to Customization and Extension.
Conclusion
Tailwind CSS makes component styling simpler. Instead of writing custom CSS for every button, form, or card, you can build with utility classes that are fast to reuse and easy to update.
In this guide, you saw how to build common UI components, handle responsive layouts, and style interactive states like hover and focus.
Start with a few reusable patterns. Then refine them to match your design system, product, or workflow.
And if you want to speed things up, a React UI component library built with Tailwind CSS can save a lot of setup work. You get ready-made components, consistent styling, and customizable patterns.