Trabajar estilizando formularios no siempre es sencillo, sobre todo cuando se trata de personalizar los elementos <select> o <input type=”checkbox”/> o hacer coincidir el diseño de una etiqueta <select> con la de un <input> por ejemplo.

Pero gracias a Tailwind tenemos muchas más opciones a la hora de estilizar nuestros <form>, pero además Tailwind nos ofrece un plugin específicamente para formularios, mismo que aprenderás a utilizar justo ahora en este post.

¿Qué podemos hacer con Tailwind en nuestros formularios?

Vamos a trabajar con este pequeño formulario de suscripción que nos permitirá explorar nuestras opciones.

<form class="py-8 px-6 bg-white rounded-xl max-w-sm">
        <div class="text-gray-700 grid">
          <label for="name">Escribe tu correo</label>
          <input type="text" id="email" name="email" />
        </div>
        <div class="text-gray-700 grid mt-4">
          <label for="role" class="block text-gray-700"
            >¿Qué te describe más?</label
          >
          <select>
            <option value="student">Soy estudiante</option>
            <option value="programer">Soy programador</option>
            <option value="developer">Soy Desarrollador</option>
            <option value="freelancer">Soy Freelancer</option>
          </select>
        </div>
        <div class="text-gray-700 grid mt-4">
          <label for="password">Escribe tu nombre</label>
          <input type="password" name="password" id="password" />
        </div>
				<div class="text-gray-700 mt-4 gap-2 cursor-pointer flex items-center">
          <input type="checkbox" name="terms" id="terms" />
          <label for="terms">
            Acepto los
            <a class="underline text-indigo-600 hover:text-indigo-500" href="#!">
              términos</a> y
            <a href="#!" class="underline text-indigo-600 hover:text-indigo-500">
              condiciones</a>
          </label>
        </div>
        <button
          type="submit"
          class="mt-6 bg-indigo-500 text-white w-full py-2 rounded-md hover:bg-indigo-600"
        >
          Comenzar
        </button>
      </form>

Comencemos estilizando el input del correo.

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

Se ve cool, pero el outline no se ve tan bien como quisiéramos, por eso vamos a cambiarlo agregando estilos para el focus.

<input
  class="focus:ring-1 focus:ring-indigo-500 focus:outline-none focus:border-indigo-500 mt-2 w-full border border-gray-300 px-3 py-2 rounded-lg shadow-sm"
  type="text"
  id="email"
  name="email"
  autocomplete="email"
/>

¡Mucho mejor! Hagamos lo mismo con el input de password.

<input
  class="focus:ring-1 focus:ring-indigo-500 focus:outline-none focus:border-indigo-500 mt-2 w-full border border-gray-300 px-3 py-2 rounded-lg shadow-sm"
  type="password"
  id="password"
  name="password"
/>

Perfecto. ¿Será que podemos estilizar la etiqueta select también con estas utilidades?

<select
	id="role"
	name="role"
  class="focus:ring-1 focus:ring-indigo-500 focus:outline-none focus:border-indigo-500 mt-2 w-full border border-gray-300 px-3 py-2 rounded-lg shadow-sm"
>
// ...
</select>

Pero, nuestro <select> no se ve igual que nuestros inputs, los paddings no se respetan, y si usáramos la utilidad appearance-none podríamos corregir los padding, pero perderíamos el pequeño ícono, lo que nos llevaría a necesitar modificar esto con un background o incluso agregar una clase en CSS directamente. Esto se puede volver aún más difícil cuando trabajamos con checkboxes o radio-buttons.

Es aquí donde el plugin para formularios resuelve el problema

Comencemos instalando el plugin con npm

npm i @tailwindcss/forms

Ahora vamos a agregarlo a nuestro archivo de configuración de Tailwind.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};

Eliminaremos todos las utilidades que habíamos agregado a nuestros <inputs> y <select> para ver que automáticamente el plugin hará un opinionated reset de los elementos.

<input
  class="border-gray-300 rounded-lg"
  type="text"
  id="email"
  name="email"
  autocomplete="email"
/>

Hemos agregado muchas menos utilidades, pues el plugin ya agrega por nosotros el border y solo hemos tenido que cambiar el color, así como también ha agregado los paddings.

Es importante decir que este plugin para formularios de Tailwind selecciona los elementos a partir de la propiedad type. Si esta propiedad no está presente en nuestro inputs, el plugin no agregará ningún estilo.

Estilizando la decoración

Ahora que tenemos menos utilidades aplicadas a nuestros elementos además de que hemos utilizado las mismas para todos, podemos entonces trabajar en los colores del focus y las decoraciones.

<input
  class="border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-indigo-500"
  type="text"
  id="email"
  name="email"
  autocomplete="email"
/>

Ahora, gracias al plugin, estilizar el checkbox es sumamente fácil, pues podemos cambiar el tamaño de la caja, así como su color sin necesidad de agregar apperance-none.

<input
  class="rounded border-gray-300 text-pink-500 focus:ring-pink-500"
  type="checkbox"
  name="terms"
  id="terms"
/>

Si alguna vez te has enfrentado a estilizar un checkbox, entenderás lo simple que se vuelve esta tarea con este plugin.

Ahora puedes crear formularios que destaquen de verdad. ¿Genial no?

Recuerda suscribirte, pues estoy trabajando en mi nuevo curso de Tailwind CSS y seguro no quieres perderte el estreno.

Abrazo. blissmo.