Styling Text Inputs and Textareas
Apply border, padding, ring, and focus utilities to text inputs and textareas to create clean, accessible form fields.
The Problem With Unstyled Inputs
Browsers render text inputs and textareas with their own default styles — different on every operating system and browser. On Chrome, the default input has a blue ring on focus; on Firefox, it may look different entirely.
Tailwind resets form elements with its preflight base styles, giving you a clean slate. From there, you apply your own border, padding, background, and focus styles explicitly, creating a consistent experience across all browsers.
<!-- Without styling: browser-dependent appearance -->
<input type="text" placeholder="Enter name" />
<!-- With Tailwind: consistent, styled input -->
<input
type="text"
placeholder="Enter name"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>Base Input Structure
A well-styled text input combines sizing, border, background, and focus utilities. The core pattern is w-full px-3 py-2 text-sm bg-white border border-gray-300 rounded-lg for the default state.
Add placeholder:text-gray-400 to soften the placeholder text and text-gray-900 to ensure actual input text is dark and readable. The w-full utility ensures the input fills its container, which is the expected behavior for form fields.
<input
type="text"
placeholder="Full name"
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
placeholder:text-gray-400"
/>All lessons in this course
- Styling Text Inputs and Textareas
- Select Menus and Checkboxes
- Form Layout Patterns
- Validation and Error States