Buttons & Forms in Tailwind CSS 4 – Complete Guide
Buttons and forms are essential components of any website or web application. They allow users to interact with the interface, submit data, and perform actions.
Tailwind CSS provides powerful utility classes that make it easy to build modern and responsive buttons and form elements without writing custom CSS.
In this tutorial you will learn:
- Button styles
- Hover & focus states
- Form inputs
- Checkbox and radio buttons
- Validation UI
We will use the Tailwind CSS 4 CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a simple HTML file.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold mb-6">
Buttons & Forms in Tailwind CSS
</h1>
</body>
</html>
Now you can start creating form components.
Button Styles
Tailwind allows you to easily create different button styles.
Basic Button
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Primary Button
</button>
Explanation:
| Class | Purpose |
|---|---|
| bg-blue-500 | background color |
| text-white | text color |
| px-4 py-2 | padding |
| rounded | border radius |
Multiple Button Styles
<div class="flex gap-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Primary
</button>
<button class="bg-green-500 text-white px-4 py-2 rounded">
Success
</button>
<button class="bg-red-500 text-white px-4 py-2 rounded">
Danger
</button>
</div>
Outline Button
<button class="border border-blue-500 text-blue-500 px-4 py-2 rounded hover:bg-blue-500 hover:text-white transition">
Outline Button
</button>
Hover & Focus States
Interactive states improve user experience.
Hover Button
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded transition">
Hover Button
</button>
Focus Button
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:ring-2 focus:ring-blue-400">
Focus Button
</button>
Explanation:
| Class | Role |
|---|---|
| focus:ring-2 | focus highlight |
| focus:ring-blue-400 | ring color |
Form Inputs
Form inputs collect user data such as name, email, or password.
Text Input Example
<input
type="text"
placeholder="Enter your name"
class="border border-gray-300 p-3 rounded w-full focus:ring-2 focus:ring-blue-500 focus:outline-none">
Features:
- border styling
- focus highlight
- full width input
Email Input
<input
type="email"
placeholder="Enter your email"
class="border border-gray-300 p-3 rounded w-full focus:ring-2 focus:ring-blue-500">
Textarea Input
<textarea
placeholder="Enter your message"
class="border border-gray-300 p-3 rounded w-full focus:ring-2 focus:ring-blue-500"></textarea>
Used for:
- comments
- feedback forms
- contact forms
Checkbox Example
Checkboxes allow users to select multiple options.
<label class="flex items-center gap-2">
<input
type="checkbox"
class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500">
<span>Accept terms and conditions</span>
</label>
Explanation:
| Class | Role |
|---|---|
| w-4 h-4 | checkbox size |
| text-blue-500 | check color |
Radio Button Example
Radio buttons allow users to select only one option.
<div class="flex gap-4">
<label class="flex items-center gap-2">
<input type="radio" name="plan" class="text-blue-500">
Basic
</label>
<label class="flex items-center gap-2">
<input type="radio" name="plan" class="text-blue-500">
Premium
</label>
</div>
Used for:
- plan selection
- gender selection
- options in forms
Validation UI
Validation helps users understand when input is incorrect.
Error Input Example
<input
type="text"
placeholder="Username"
class="border border-red-500 p-3 rounded w-full">
<p class="text-red-500 text-sm mt-1">
Username is required
</p>
Success Input Example
<input
type="text"
placeholder="Email"
class="border border-green-500 p-3 rounded w-full">
<p class="text-green-600 text-sm mt-1">
Email looks good
</p>
Complete Contact Form Example
<form class="max-w-md mx-auto bg-white shadow p-6 rounded space-y-4">
<h2 class="text-xl font-semibold">
Contact Form
</h2>
<input
type="text"
placeholder="Full Name"
class="border border-gray-300 p-3 rounded w-full focus:ring-2 focus:ring-blue-500">
<input
type="email"
placeholder="Email Address"
class="border border-gray-300 p-3 rounded w-full focus:ring-2 focus:ring-blue-500">
<textarea
placeholder="Your Message"
class="border border-gray-300 p-3 rounded w-full focus:ring-2 focus:ring-blue-500"></textarea>
<label class="flex items-center gap-2">
<input type="checkbox" class="text-blue-500">
Subscribe to newsletter
</label>
<button
class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded w-full">
Send Message
</button>
</form>
This creates a modern contact form UI.
Why Use Tailwind for Forms?
Faster Development
No custom CSS required.
Consistent Design
Form elements follow the same design system.
Responsive UI
Forms adapt to different screen sizes.
Easy Customization
Colors, spacing, and states can be easily adjusted.
FAQs
How do you style buttons in Tailwind?
Example:
<button class="bg-blue-500 text-white px-4 py-2 rounded">
Button
</button>
How do you add focus styles to inputs?
Use focus utilities.
Example:
focus:ring-2 focus:ring-blue-500
How do you style checkboxes?
Example:
<input type="checkbox" class="text-blue-500">
How do you create validation UI?
Use color indicators.
Example:
border-red-500
text-red-500
Can forms be responsive in Tailwind?
Yes. Tailwind breakpoints can control form layout.
Example:
md:grid-cols-2
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.