Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. CSS

Cómo crear un formulario responsivo usando TailwindCSS

Read Time:9 minsLanguages:

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.

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.

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

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

Aquí estamos agregando TailwindCSS y autoprefixer como complementos PostCSS.

Para inicializar Tailwind haremos lo siguiente:

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

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.

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

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:

add tailwindcss in codepenadd tailwindcss in codepenadd tailwindcss in codepen

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.

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í:

El esqueleto del marcado te dará el siguiente resultado:

barebonesbarebonesbarebones

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.

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

styled formstyled formstyled form

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

Asignando un estilo a la etiqueta

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.

  • 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.

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.

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:


final responsive formfinal responsive formfinal responsive form

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.

Obtén más información sobre TailwindCSS con Tuts+

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.