Cómo crear un formulario responsivo usando TailwindCSS

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Al trabajar con HTML y CSS, el enfoque aceptado para crear sitios web es escribir la estructura en el archivo HTML e implementar los estilos en un archivo CSS. Pero, ¿qué pasaría si pudieras añadir los estilos usando clases directamente en tu archivo HTML? De hecho sí se puede, y eso es lo que vamos a hacer gracias a TailwindCSS.

Introducción a TailwindCSS

De acuerdo a la documentación de TailwindCSS:

"Tailwind CSS es un framework de bajo nivel altamente personalizable que te brinda todos los elementos básicos para crear diseños a la medida sin ningún estilo obstinado y molesto con el que tengas que luchar para invalidarlo".

Con Tailwind CSS no tienes que crear tus propios estilos. Puedes usar las clases que proporciona dentro de tu marcado para implementar los diseños personalizados que desees. También te brinda la posibilidad de extender esos estilos.

"En resumen, Tailwind es un framework CSS, pero es diferente de frameworks como Bootstrap y Foundation. Proporciona solamente los fundamentos de lo que necesitas para dar estilo a tus propias páginas web" –
Adi Purdila

Durante este tutorial aprenderás de qué manera puedes comenzar con TailwindCSS mientras creamos un formulario responsivo. Puedes bifurcar el repositorio en GitHub o la demostración en CodePen:

1. Comienza usando NPM o Yarn

Vamos a usar un par de flujos de trabajo para comenzar; puedes elegir el que prefieras. En el caso de los usuarios de package manager, comiencen creando un directorio de trabajo en sus terminales.

mkdir tutsplus-tailwindcss-form-demo && $_

## For NPM
npm init -y

## For Yarn
yarn init -y

Eso genera un directorio y navega a su interior. Luego inicializamos ya sea npm o yarn, dependiendo del que hayas seleccionado para trabajar, usando las configuraciones predeterminadas (de ahí el indicador -y).

Una vez hecho eso, necesitamos instalar tailwind y otros dos paquetes: autoprefixer y postcss-cli.

# Using npm
npm install tailwindcss autoprefixer postcss-cli

# Using Yarn
yarn add tailwindcss autoprefixer postcss-cli

A continuación crea un archivo en el directorio raíz:

touch postcss.config.js

Abre el archivo y agrega el siguiente fragmento de código para la configuración:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Aquí estamos agregando TailwindCSS y autoprefixer como complementos PostCSS.

Para inicializar Tailwind haremos lo siguiente:

npx tailwind init

Esto creará un archivo de configuración llamado tailwind.config.js en el directorio raíz del proyecto:

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

Crea una carpeta llamada css y, en su interior, crea un archivo de nombre tailwind.css. Usaremos la directiva @tailwind para inyectar algunos estilos en nuestro CSS.

@tailwind base;
@tailwind components;
@tailwind utilities;

Abre tu package.json y cambia la secuencia de comandos para que se vea así:

"scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  }

Con eso podemos ejecutar npm run build para hacer uso de la CLI de Tailwind para procesar nuestro CSS. Los estilos procesados se generarán en el archivo public/build/tailwind.css. ¡Continúa y ejecuta el comando para verlo!

2. Comienza usando CodePen

Si te gusta usar CodePen como entorno de desarrollo para tus proyectos, el proceso de configuración es extremadamente sencillo.

Dirígete a CodePen e inicia un nuevo Pen.

En las configuraciones de CSS selecciona Autoprefixer y busca tailwindcss en las hojas de estilo externas:

Bueno, eso es todo.

3. Crea el archivo index

Como describimos anteriormente, si estás desarrollando con un package manager necesitarás añadir un archivo llamado index.html en el interior del directorio público creado.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TutsPlus TailwindCSS Form Demo</title>
  <link rel="stylesheet" href="/build/tailwind.css">
</head>
<body>
    
</body>
</html>

Si continúas con CodePen no necesitarás esa parte, pero deberás colocar una etiqueta <body> en el panel HTML.

En cualquier caso, queremos comenzar nuestro formulario responsivo con el esqueleto y luego aplicar el estilo, por lo que el punto de partida se verá así:

<div>
  <form>
    <div>
      <div>
        <div>
          <label for="company">
            Company Name*
          </label>
          <input id="company" type="text" placeholder="Tutsplus">
          <div>
            <span>
              Please fill out this field.
            </span>
          </div>
        </div>
        <div>
          <label for="title">
            Title*
          </label>
          <input id="title" type="text" placeholder="Software Engineer">
        </div>
      </div>
      <div>
        <div>
          <label for="application-link">
            Application Link*
          </label>
          <input id="application-link" type="text" placeholder="https://....">
        </div>
      </div>
      <div>
        <div>
          <label for="location">
            Location*
          </label>
          <div>
            <select id="location">
              <option>Abuja</option>
              <option>Enugu</option>
              <option>Lagos</option>
            </select>
          </div>
        </div>
        <div>
          <label for="job-type">
            Job Type*
          </label>
          <div>
            <select id="job-type">
              <option>Full-Time</option>
              <option>Part-Time</option>
              <option>Internship</option>
            </select>
          </div>
        </div>
        <div>
          <label for="department">
            Department*
          </label>
          <div>
            <select id="department">
              <option>Engineering</option>
              <option>Design</option>
              <option>Customer Support</option>
            </select>
          </div>
        </div>
      </div>
      <div>
        <div>
          <button>
            Button
          </button>
        </div>
      </div>
    </div>
  </form>
</div>

El esqueleto del marcado te dará el siguiente resultado:

4. Asigna un estilo a los primeros 3 campos de entrada

No hay mucho que ver ahí, así que continuemos asignando un estilo a los primeros tres campos de entrada para darnos una idea sobre el funcionamiento de Tailwind CSS.

<div class="md:w-1/2 px-3 mb-6 md:mb-0">
  <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="company">
    Company Name*
  </label>
  <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="company" type="text" placeholder="Netboard">
  <div>
      <span class="text-red-500 text-xs italic">
        Please fill out this field.
      </span>
  </div>
</div>
<div class="md:w-1/2 px-3">
  <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="title">
    Title*
  </label>
  <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="title" type="text" placeholder="Software Engineer">
</div>
</div>
<div class="-mx-3 md:flex mb-6">
<div class="md:w-full px-3">
  <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="application-link">
    Application Link*
  </label>
  <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="application-link" type="text" placeholder="https://....">
</div>
</div>

Eso puede parecer un poco abrumador, ya que hemos aplicado estilos de diferentes maneras, pero revisaremos todo muy pronto. El resultado se ve así:

Recuerda: ¡aplicamos todos los estilos sin escribir una sola línea de CSS! entonces, ¿qué hicimos exactamente?

Asignando un estilo a la etiqueta

<label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="company">
    Company Name*
</label>

Para esta etiqueta:

configuramos el estilo text-transform con el valor uppercase.
tracking-wide denota un espaciado entre letras de 0.025em, mientras que text-black le da al texto un valor de #000 en colour.
text-xs es el valor font-size, que es igual a .75rem, y font-bold es un valor font-weight de 700.
mb-2, en donde mb significa margin-bottom, aplica un margen inferior de 0.5rem.

Asignando estilos a las entradas

Vamos a hacer algo similar para el campo de entrada y los divs.

<input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="company" type="text" placeholder="Tutsplus">

La w denota el valor width, con una opción añadida que especifica la extensión del ancho del elemento. En este caso, w-full significa un valor para width del 100%.
bg se usa para aplicar estilos de fondo; aquí estamos aplicando un color de fondo con el valor #edf2f7, y también agregamos un color de texto con el valor #000.
Aplicamos un estilo para el borde junto con un color de borde con el valor #edf2f7.
py-3 aplica un padding-top y un padding-bottom de 0.75rem cada uno.
Después, px-4 aplica un padding-right y un padding-left de 1rem cada uno.

Al revisar la documentación puedes ver cómo encaja cada una de las clases.

5. Asigna un estilo a los elementos restantes

La adición de algunas clases a los otros elementos permitirá que el formulario responsivo termine viéndose aún más limpio.

<div class="-mx-3 md:flex mb-2">
  <div class="md:w-1/2 px-3 mb-6 md:mb-0">
    <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="location">
      Location*
    </label>
    <div>
      <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="location">
        <option>Abuja</option>
        <option>Enugu</option>
        <option>Lagos</option>
      </select>
    </div>
  </div>
  <div class="md:w-1/2 px-3">
    <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="job-type">
      Job Type*
    </label>
    <div>
      <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="job-type">
        <option>Full-Time</option>
        <option>Part-Time</option>
        <option>Internship</option>
      </select>
    </div>
  </div>
  <div class="md:w-1/2 px-3">
    <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="department">
      Department*
    </label>
    <div>
      <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="department">
        <option>Engineering</option>
        <option>Design</option>
        <option>Customer Support</option>
      </select>
    </div>
  </div>
</div>
<div class="-mx-3 md:flex mt-2">
  <div class="md:w-full px-3">
    <button class="md:w-full bg-gray-900 text-white font-bold py-2 px-4 border-b-4 hover:border-b-2 border-gray-500 hover:border-gray-100 rounded-full">
      Button
    </button>
  </div>
</div>

El formulario se extiende para cubrir el navegador. Restringiremos el div contenedor y también usaremos un archivo SVG para asignarle un estilo al fondo y añadir un poco de atractivo visual.

Para hacer esto necesitas crear una carpeta llamada assets dentro del directorio público y, en su interior, otra carpeta llamada svg. Luego crea un archivo llamado architect.svg y pega lo siguiente en su interior.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="199" viewBox="0 0 100 199"><g fill="#000"><path d="M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z"></path></g></svg>

Como se mencionó anteriormente, el paso adicional que tenemos que seguir es añadir estilos de fondo, padding y flex a los elementos div contenedores y a la etiqueta body. Por lo tanto, así es como se verá el cuerpo de nuestro HTML al final:

<body class="bg-gray-100 flex bg-local" style="background: url('./assets/svg/architect.svg')">
  <div class="bg-gray-100 mx-auto max-w-6xl bg-white py-20 px-12 lg:px-24 shadow-xl mb-24">
    <form>
      <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
        <div class="-mx-3 md:flex mb-6">
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="company">
              Company Name*
            </label>
            <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="company" type="text" placeholder="Netboard">
            <div>
              <span class="text-red-500 text-xs italic">
                Please fill out this field.
              </span>
            </div>
          </div>
          <div class="md:w-1/2 px-3">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="title">
              Title*
            </label>
            <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="title" type="text" placeholder="Software Engineer">
          </div>
        </div>
        <div class="-mx-3 md:flex mb-6">
          <div class="md:w-full px-3">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="application-link">
              Application Link*
            </label>
            <input class="w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3" id="application-link" type="text" placeholder="http://....">
          </div>
        </div>
        <div class="-mx-3 md:flex mb-2">
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="location">
              Location*
            </label>
            <div>
              <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="location">
                <option>Abuja</option>
                <option>Enugu</option>
                <option>Lagos</option>
              </select>
            </div>
          </div>
          <div class="md:w-1/2 px-3">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="job-type">
              Job Type*
            </label>
            <div>
              <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="job-type">
                <option>Full-Time</option>
                <option>Part-Time</option>
                <option>Internship</option>
              </select>
            </div>
          </div>
          <div class="md:w-1/2 px-3">
            <label class="uppercase tracking-wide text-black text-xs font-bold mb-2" for="department">
              Department*
            </label>
            <div>
              <select class="w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded" id="department">
                <option>Engineering</option>
                <option>Design</option>
                <option>Customer Support</option>
              </select>
            </div>
          </div>
        </div>
        <div class="-mx-3 md:flex mt-2">
          <div class="md:w-full px-3">
            <button class="md:w-full bg-gray-900 text-white font-bold py-2 px-4 border-b-4 hover:border-b-2 border-gray-500 hover:border-gray-100 rounded-full">
              Button
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

Al haber hecho todo eso, ¡debes terminar con este resultado!

¿Qué sigue?

Durante este tutorial aprendiste sobre las posibilidades de TailwindCSS al crear formularios responsivos. Espero que te haya ayudado a comprender el poder del uso de las clases de estilo de esta manera.

TailwindCSS recibe un mantenimiento constante de Adam Wathan y algunas otras personas. Te ruego que sigas de cerca la documentación, ya que es tu recurso número uno para crear con TailwindCSS. Debo agregar que Adam está trabajando en componentes de Tailwind que será increíble usar, así que asegúrate de suscribirte.

Si has creado algo interesante con TailwindCSS, o si hay algo que te gustaría compartir, me encantaría leer sobre eso en la sección de comentarios.