Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Structuring and Styling Forms | Building Basic Components
Tailwind CSS for Web Development

book
Structuring and Styling Forms

In this chapter, we will explore how to style different form elements using Tailwind CSS, including inputs, textareas, radio buttons, and switches.

Inputs

Inputs are essential for user data entry. Tailwind provides utility classes to style inputs effectively.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms - Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="p-4 bg-red-100">
<input
class="border border-gray-300 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-600"
type="text"
placeholder="Enter your name"
/>
</div>
</body>
</html>

Textareas

Textareas are used for multiline text input. They can be styled similarly to inputs.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms - Example 2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="p-4 bg-red-100">
<textarea
class="border border-gray-300 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-600"
rows="4"
placeholder="Enter your message"
></textarea>
</div>
</body>
</html>

Radio Buttons

Radio buttons allow users to select one option from a set.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms - Example 3</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="p-4 bg-red-100">
<div>
<label class="inline-flex items-center">
<input
type="radio"
class="form-radio"
name="radio-option"
value="option1"
/>
<span class="ml-2 text-blue-500">Option 1</span>
</label>
<label class="inline-flex items-center ml-4">
<input
type="radio"
class="form-radio"
name="radio-option"
value="option2"
/>
<span class="ml-2 text-blue-500">Option 2</span>
</label>
</div>
</div>
</body>
</html>

form-radio applies default Tailwind CSS styling for radio buttons.

Switches

Switches (toggles) are used to represent binary choices. While Tailwind CSS doesn’t have a default utility class for switches, you can combine utilities to create one.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms - Example 4</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
input:checked ~ .dot {
transform: translateX(100%);
background-color: #48bb78; /* Tailwind's green-500 */
}
</style>
</head>
<body>
<div class="p-4 bg-red-100">
<label class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" id="toggle" class="sr-only" />
<div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
<div
class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"
></div>
</div>
<div class="ml-3 text-gray-700 font-medium">Toggle Me</div>
</label>
</div>
</body>
</html>
  • sr-only: Hides the checkbox but keeps it accessible for screen readers;
  • transition: Enables smooth transition for the switch dot;
  • Custom CSS is used to handle the checked state.

Note

You can find more information on forms in Tailwind CSS here.

1. What does the class focus:ring-2 do when applied to an input?

2. Which class is used to hide an element but keep it accessible for screen readers?

question mark

What does the class focus:ring-2 do when applied to an input?

Selecione a resposta correta

question mark

Which class is used to hide an element but keep it accessible for screen readers?

Selecione a resposta correta

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 5
some-alt