テキスト入力とテキストエリアのスタイリング

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.

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.

The focus state is the most important interactive style for an input. Users navigating by keyboard need a clear visual indicator of which field is active. Use focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent to replace the browser's default outline with a Tailwind ring.

The focus:border-transparent removes the gray border when focused so the blue ring is not competing with it visually. Add transition-shadow duration-150 for a smooth ring appearance.

Every input must have an associated label for accessibility. Wrap the label and input in a flex flex-col gap-1 container so they stack neatly. The label uses text-sm font-medium text-gray-700 and is connected to the input with matching for and id attributes.

Never rely solely on placeholder text as a label substitute — placeholders disappear when the user starts typing, leaving the field context-less.

Many inputs benefit from a prefix icon that communicates the expected input type — a search magnifier, an envelope for email, or a lock for passwords. Use relative on the wrapper, absolute left-3 top-1/2 -translate-y-1/2 on the icon, and pl-10 on the input to indent the text past the icon.

This technique keeps the icon and input cleanly aligned without any extra wrapper elements affecting layout.

A suffix button sits attached to the right edge of an input — common in password fields (show/hide toggle) or search inputs (submit button). Use a flex wrapper with overflow-hidden rounded-lg border border-gray-300 flex, set the input to flex-1 border-0 focus:ring-0, and style the button with a left border separator.

The border-0 on the input removes its border since the outer flex wrapper provides the shared border.

Textareas use the same utility classes as text inputs. Set a minimum height with min-h-24 or a fixed height with h-32, and add resize-none or resize-y to control whether the user can resize the element.

Use resize-y to allow vertical resizing (the most natural behavior for textareas) and prevent horizontal resizing that can break the layout. Adding leading-relaxed improves readability as users type multi-line content.

Disabled inputs should be visually distinguished from active ones. Apply disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed to create a lighter, greyed-out appearance. Also add disabled:border-gray-200 to soften the border.

Always include the HTML disabled attribute — Tailwind's disabled: variant reads this attribute, so the styles only apply when the attribute is present.

A readonly input displays a value users can read and copy but not modify. Unlike disabled, read-only inputs are still focusable and keyboard-navigable. Style them with read-only:bg-gray-50 read-only:text-gray-600 to subtly indicate they cannot be edited.

Read-only fields are used for computed values, confirmation fields, or reference data that users need to see but should not change.

Forms in different contexts need different input sizes. Define a small, medium, and large variant by changing the padding and text size. A small input is ideal for inline filters; a large input suits hero search bars.

• Small: px-2.5 py-1.5 text-xs
• Medium: px-3 py-2 text-sm (default)
• Large: px-4 py-3 text-base

Textareas for user-generated content often include a character count displayed below the field. Use a flex row with flex items-center justify-between mt-1 to position helper text on the left and the count on the right.

Style the helper text with text-xs text-gray-500 and the count with matching small gray text. JavaScript updates the count on each input event. When near the limit, switch the count color to text-red-600 as a warning.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: base input styling with border border-gray-300 rounded-lg px-3 py-2; focus rings replacing browser outlines using focus:outline-none focus:ring-2 focus:ring-blue-500; and special input patterns like icon prefixes with absolute positioning, suffix buttons using flex layout, and disabled/read-only variants. Next up we style select menus and checkboxes.