Styling Form Fields

Under the opening hours, we've added a contact form: a name, an email address, a message and a "Send" button. The "Send" button already has the same classes as Tiger's button.

But where are the fields? Their labels are there, but the fields themselves can't be seen. Click just below the label Name and type something: the field is there, it's only invisible. That's Preflight, Tailwind's base styles, at work. Just as it takes the margins away from paragraphs and the look away from headings, it removes the border and the background of form fields, so that every field starts plain and you style it yourself.

A field needs at least a border, so that people can see where to click, and padding, so that the text doesn't touch the border. You know all the classes for that from the previous lessons:

<input type="text" id="name" name="name" class="w-full rounded-lg border border-stone-300 px-3 py-2">

• w-full: the field is as wide as the form,
• rounded-lg: rounded corners,
• border border-stone-300: a light gray border, 1 px wide,
• px-3 py-2: padding of 12 px on the left and right and 8 px at the top and bottom.

The textarea for the message gets the same classes as the two input elements.

An empty field can also show a hint: the text of its placeholder attribute. It appears in the field in a lighter color and disappears as soon as you start typing. It's a good place for an example of what to fill in, such as placeholder="jane@example.com". It doesn't replace the label, though: the label stays visible while you type, the placeholder doesn't.

The color of the placeholder is set with the variant placeholder:. It works like the variants for states: placeholder:text-stone-400 colors only the placeholder, not the text that people type. In CSS, the placeholder is the pseudo-element ::placeholder: a part of an element that can be styled on its own. (Preflight gives the placeholder the color of the text, only half transparent. A color from the palette fits the rest of the page better.)