Si ha estado al tanto de los últimos frameworks CSS, probablemente ya haya oído hablar del chico más nuevo del bloque: Tailwind CSS. Según su documentación, “Tailwind es un marco CSS de utilidad para crear rápidamente interfaces de usuario personalizadas”.
En la práctica, esto significa utilizar una variedad de clases que se correlacionan estrechamente con las propiedades CSS subyacentes. Por ejemplo, aplicando una clase como .text-center a un elemento significa que estamos configurando su text-align propiedad a center. Bastante simple, ¿verdad?
El uso de clases de utilidad como esta nos permite pasar más tiempo iterando a través de diseños y evitando la abstracción prematura de nuestro CSS. Luego, una vez que estemos satisfechos con nuestros diseños, Tailwind facilita la extracción de nuestras utilidades en clases de componentes.
Ahora, estoy seguro de que sabe que incluso mencionar un marco de utilidad es una invitación abierta a una cierta cantidad de alboroto. Antes de comenzar a gritarme en Twitter o los comentarios por mencionar siquiera un marco de utilidad, tomemos un momento para recordar que Tailwind es solo una herramienta posible que podemos usar.
Si no desea agregarlo a su caja de herramientas, no se preocupe, ¡lo hará! Pero, si está interesado en al menos comprender esta nueva herramienta, echemos un vistazo a cómo crear juntos un formulario de registro.
Sin más preámbulos, configuremos un proyecto nuevo con Tailwind, codifiquemos un poco de HTML y modifiquemos su estilo.
La puesta en marcha
Comencemos por crear un directorio desde el que podamos trabajar. Usando su terminal, navegue hasta el directorio en el que le gustaría crear su proyecto y ejecute mkdir <your-project-name>. Ahora vamos a cd en nuestro nuevo proyecto y siga la guía de instalación de Tailwind.
Como queremos ver todo lo que Tailwind puede hacer, instalémoslo con npm o Yarn usando lo siguiente.
# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --devCon Tailwind instalado, ahora podemos generar el archivo de configuración ejecutando ./node_modules/.bin/tailwind init. Esto genera una tailwind.js archivo para nosotros en la raíz de nuestro proyecto. En este archivo, podemos ajustar la configuración predeterminada de Tailwind a las necesidades de nuestro proyecto. Para este proyecto, no deberíamos tener que cambiar nada.
Ahora, creemos un archivo CSS donde podamos administrar nuestro propio CSS e inyectar los estilos Tailwind. Para hacer eso podemos correr touch styles.css de nuestro directorio de proyectos.
Dentro de este nuevo archivo, podemos usar Tailwind’s @tailwind directiva para inyectar el preflight y utilities estilos en nuestro CSS. preflight contiene todos los estilos base y algunas normalizaciones de estilo del navegador, mientras que utilities agrega todas las clases de utilidad que especificamos en nuestro archivo de configuración. Entonces nuestro styles.css El archivo debería verse así:
@tailwind preflight;
/* Here we can add any custom overrides */
@tailwind utilities;
/* Here we can add our own utilities or custom CSS */Si está utilizando PHPStorm y le molestan los garabatos rojos en su archivo CSS por @tailwind, solo agrega /*noinspection CssInvalidAtRule*/ arriba de donde lo usa.
Con todo eso configurado, podemos correr ./node_modules/.bin/tailwind build styles.css -o main.css para generar el archivo CSS que nos gustaría usar en nuestro proyecto. Esto puede parecer un poco tedioso, ¡pero no se preocupe! Tailwind funciona con herramientas de compilación adecuadas como Webpack, Gulp o Laravel Mix, por lo que en un proyecto más grande puede configurarlo y olvidarlo.
¡Eso se encargará de nuestra configuración de Tailwind! Ahora, podemos empezar a codificar nuestro HTML.
Nuestro HTML
Antes de que podamos diseñar nuestro formulario de registro, ¡debemos crearlo! Para empezar, necesitaremos un sencillo index.html Archivo. Entonces, desde su directorio raíz, puede ejecutar touch index.html para crear el archivo. Luego, podemos agregar el siguiente fragmento para comenzar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwind Intro</title>
<link rel="stylesheet" href="https://css-tricks.com/style-form-tailwind-css/main.css">
</head>
<body>
</body>
</html>Como puede ver, es su página HTML típica. La única arruga aquí es que estamos importando nuestro main.css archivo y le hemos dado a nuestra página un título descriptivo. ¡Ahora, comencemos a construir nuestro formulario de registro!
Para empezar, agreguemos dos anidados <div> elementos en el interior de nuestro <body> etiqueta.
<body>
<div>
<div>
</div>
</div>
</body>Usaremos el exterior <div> para el posicionamiento de nuestra página, mientras que el interior <div> será el envoltorio de nuestro formulario. Ahora, dentro del interior <div>, podemos agregar un <h1> para etiquetar el formulario, y un <form>.
<div>
<h1>Sign Up</h1>
<form action="https://css-tricks.com/" method="post">
</form>
</div>¡Realmente estamos cocinando con gas ahora! Para terminar el formulario, solo necesitamos agregar el <label> elementos, <input> elementos, y <button>. A medida que los agregamos, envolvemos cada uno de nuestros <label> <input> pares en un <div> para que permanezcan juntos.
<form action="https://css-tricks.com/" method="post">
<div>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name">
</div>
<div>
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name">
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<button type="submit">Create Account</button>
</form>Finalmente, agreguemos un enlace para acceder a la página de inicio de sesión justo debajo de nuestro formulario.
<div>
<!-- Form is here -->
<a href="https://css-tricks.com/login">Already have an account?</a>
</div>Poniendo todo eso junto, nuestro HTML se verá así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwind Intro</title>
<link rel="stylesheet" href="https://css-tricks.com/style-form-tailwind-css/main.css">
</head>
<body>
<div>
<div>
<h1>Sign Up</h1>
<form action="https://css-tricks.com/" method="post">
<div>
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name">
</div>
<div><label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name">
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<button type="submit">Create Account</button>
</form>
<a href="https://css-tricks.com/login">Already have an account?</a>
</div>
</div>
</body>
</html>Bastante sencillo, ¿verdad? Ahora, cuando veamos cómo se representa en la página, deberíamos ver algo parecido a esto:
No se alarme si parece que el <input>faltan los s; eso es solo el navegador se reinicia en el trabajo. Por fin, estamos listos para ver de qué se trata este Tailwind CSS.
Usando Tailwind CSS
Siendo los buenos desarrolladores que somos, adoptemos un enfoque centrado en los dispositivos móviles para diseñar nuestro formulario de registro. Por lo tanto, con un ancho de ventana más pequeño de 400px, nuestra página se ve así:
Aplicar estilo a nuestros campos de formulario
Comencemos a usar Tailwind diseñando nuestro <input>s. Primero, agreguemos un borde para que podamos verlo en la página. Para hacer eso, solo necesitamos agregar el .border clase. Entonces, ahora nuestro primer nombre <input> se verá así:
<input class="border" type="text" name="first_name" id="first_name">¡Ahora podemos verlo en la pantalla!
¿Qué tan fácil fue eso? Continuemos agregando algo de relleno y haciendo que el color del texto sea un poco más claro. Para hacer eso, solo necesitamos agregar las siguientes clases: .py-2, .px-3, y .text-grey-darkest.
<input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">Con las dos primeras clases, aprovechamos la escala de relleno que viene con Tailwind y la aplicamos vertical y horizontalmente al elemento. Si desea definir su propia escala, simplemente acceda a su archivo de configuración y cámbielo a lo que necesite. Con la última clase, usamos la paleta de colores predeterminada de Tailwind y cambiamos el color de nuestro elemento al gris más oscuro.
Llevemos nuestro formulario un paso más allá. Ahora, podemos posicionar nuestro <label>está por encima de nuestro <input>sy dales un poco de estilo.
<div class="flex flex-col mb-4">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
<input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
</div>
Mire eso, ¡nuestro campo de nombre se ve genial! Y la mejor parte es que realmente no tengo que explicar qué están haciendo estas clases, ¡se explican por sí mismas! Pero para que todos estemos en la misma página, permítanme repasarlos rápidamente.
El exterior <div> tiene su display propiedad establecida en flexvía .flex y es flex-direction se establece en column con .flex-col. Luego tiene un poco de margen en la parte inferior gracias a .mb-4.
Mientras tanto, nuestro <label> tiene un poco menos de margen en la parte inferior gracias a .mb-2. El resto de las clases hacen que nuestro texto esté en mayúsculas, negrita, grande (1.125rem) y el gris más oscuro de nuestra paleta de colores.
¡En conjunto, una manera bastante rápida y fácil de diseñar nuestros campos! Ahora, agreguemos estos estilos al resto de nuestros campos, diseñemos nuestro botón y enlace, y veamos con qué estamos trabajando.
<form class="mb-6" action="https://css-tricks.com/" method="post">
<div class="flex flex-col mb-4">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
<input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="last_name">Last Name</label>
<input class="border py-2 px-3 text-grey-darkest" type="text" name="last_name" id="last_name">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
<input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
</div>
<div class="flex flex-col mb-6">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
<input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
</div>
<button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
</form>
<a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="https://css-tricks.com/login">Already have an account?</a>
Agregar estilos de desplazamiento
¡Ahora las cosas empiezan a verse mejor! En este bloque de código, todo debería ser bastante autoexplicativo. Sin embargo, hemos agregado una cosa nueva: una variante de estado. Si echamos un vistazo a nuestro <button>, podemos ver uno en acción.
<button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>Si miras la clase inmediatamente después .bg-teal, puede ver que hemos agregado un hover: prefijo a .bg-teal-dark. Estos prefijos nos permiten diseñar elementos al pasar el mouse y enfocarnos, ¡y también nos permiten usar puntos de interrupción! Con todo, esta es una característica bastante poderosa de Tailwind y nos permite crear una interfaz de usuario dinámica y receptiva muy rápidamente.
Ahora, envuelvamos nuestra vista móvil colocando nuestro formulario en el medio de la pantalla y agregando un fondo de página colorido.
<div class="flex items-center h-screen w-full bg-teal-lighter">
<div class="w-full bg-white rounded shadow-lg p-8 m-4">
<h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
<form class="mb-4" action="https://css-tricks.com/" method="post">
<div class="flex flex-col mb-4">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
<input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="last_name">Last Name</label>
<input class="border py-2 px-3 text-grey-darkest" type="text" name="last_name" id="last_name">
</div>
<div class="flex flex-col mb-4">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
<input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
</div>
<div class="flex flex-col mb-6">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
<input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
</div>
<button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
</form>
<a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="https://css-tricks.com/login">Already have an account?</a>
</div>
</div>
Bada bing bada boom, ¡tenemos un formulario de registro móvil atractivo! Pero, ¿qué sucede cuando miramos esto en una pantalla más grande?
Diseño de respuesta
Ciertamente es mejor que nuestro HTML simple, pero necesita algo de trabajo. Usemos algunas de las variantes de estado receptivo y diseñemos esto para pantallas más grandes.
<div class="flex items-center h-screen w-full bg-teal-lighter">
<div class="w-full bg-white rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
<h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
<form class="mb-4 md:flex md:flex-wrap md:justify-between" action="https://css-tricks.com/" method="post">
<div class="flex flex-col mb-4 md:w-1/2">
<label class="mb-2 uppercase tracking-wide font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
<input class="border py-2 px-3 text-grey-darkest md:mr-2" type="text" name="first_name" id="first_name">
</div>
<div class="flex flex-col mb-4 md:w-1/2">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest md:ml-2" for="last_name">Last Name</label>
<input class="border py-2 px-3 text-grey-darkest md:ml-2" type="text" name="last_name" id="last_name">
</div>
<div class="flex flex-col mb-4 md:w-full">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
<input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
</div>
<div class="flex flex-col mb-6 md:w-full">
<label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
<input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
</div>
<button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
</form>
<a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="https://css-tricks.com/login">Already have an account?</a>
</div>
</div>
¡Gracias a nuestros prefijos receptivos, nuestro formulario de registro se ve mucho mejor! Echemos un vistazo a nuestro <form> para algunos ejemplos.
<form class="mb-4 md:flex md:flex-wrap md:justify-between" action="https://css-tricks.com/" method="post">
<!-- ... -->
</form>Al igual que con nuestro hover: prefijo, solo aplicamos las clases con prefijo cuando se cumple esa condición. En este caso, eso significa que solo estamos aplicando los estilos flexibles a nuestro <form> cuando la pagina min-width es 768px.
Extraer utilidades en componentes
Ahora que hemos terminado de crear el prototipo de nuestro formulario, podemos extraer nuestras clases de utilidad en clases de componentes. Empecemos por extraer nuestro <input> clases.
<input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">Como podemos ver, nuestro <input> tiene un par de clases al respecto. Podemos extraerlos a nuestro CSS usando Tailwind’s @apply directiva. @apply nos permite aplicar los mismos estilos que usan nuestras clases de utilidad a una nueva clase. Entonces, en la parte inferior de nuestro styles.css archivo, podemos agregar lo siguiente:
.field {
@apply .border .py-2 .px-3 .text-grey-darkest;
}Luego, una vez que hemos vuelto a compilar nuestros archivos Tailwind, nuestro <input> puede tener el .field clase.
<input class="field" type="password" name="password" id="password">Como puede ver, con Tailwind obtenemos lo mejor de las clases de componentes y utilidades. Podemos iterar rápidamente con clases de utilidad y aún extraer clases de componentes cuando comenzamos a ver un patrón.
Aún mejor, podemos combinarlos para manejar esos casos únicos en los que las clases de componentes dedicadas no tienen sentido.
El CSS final
Aplicando este pensamiento al resto de nuestro código, nuestro CSS y HTML se verán así.
@tailwind preflight;
/* Here we can add any custom overrides */
.field {
@apply .border .py-2 .px-3 .text-grey-darkest;
}
.field-label {
@apply .uppercase .font-bold .text-lg .text-grey-darkest .mb-2;
}
.field-group {
@apply .flex .flex-col;
}
.btn {
@apply .block .text-white .uppercase .text-lg .p-4 .rounded;
}
.btn-teal {
@apply .bg-teal;
}
.btn-teal:hover {
@apply .bg-teal-dark;
}
.link {
@apply .block .no-underline .text-sm;
}
.link-grey {
@apply .text-grey-dark;
}
.link-grey:hover {
@apply .text-grey-darker;
}
@tailwind utilities;
/* Here we can add our own utilities or custom CSS */El HTML final
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwind Intro</title>
<link rel="stylesheet" href="https://css-tricks.com/style-form-tailwind-css/main.css">
</head>
<body>
<div class="flex items-center h-screen w-full bg-teal-lighter">
<div class="w-full bg-white rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
<h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
<form class="mb-4 md:flex md:flex-wrap md:justify-between" action="https://css-tricks.com/" method="post">
<div class="field-group mb-4 md:w-1/2">
<label class="field-label" for="first_name">First Name</label>
<input class="field md:mr-2" type="text" name="first_name" id="first_name">
</div>
<div class="field-group mb-4 md:w-1/2">
<label class="field-label md:ml-2" for="last_name">Last Name</label>
<input class="field md:ml-2" type="text" name="last_name" id="last_name">
</div>
<div class="field-group mb-4 md:w-full">
<label class="field-label" for="email">Email</label>
<input class="field" type="email" name="email" id="email">
</div>
<div class="field-group mb-6 md:w-full">
<label class="field-label" for="password">Password</label>
<input class="field" type="password" name="password" id="password">
</div>
<button class="btn btn-teal mx-auto" type="submit">Create Account</button>
</form>
<a class="link link-grey w-full text-center" href="https://css-tricks.com/login">Already have an account?</a>
</div>
</div>
</body>
</html>Extrajimos nuestras clases duplicadas y dejamos el resto. A medida que nos encontremos construyendo componentes similares, ¡podemos extraer más clases!
Envolver
¡Uf! Ciertamente cubrimos mucho en esta publicación. Comenzamos estirando nuestros músculos HTML mediante la construcción de un formulario rápido, y luego adoptamos un enfoque de estilo móvil primero con Tailwind. En el camino, vimos cómo usar las clases de utilidad de Tailwind para diseñar rápidamente un elemento. Luego, usamos variantes de estado para agregar algunos estilos dinámicos. Y finalmente, vimos cómo podíamos tener nuestro pastel y comer también cuando extrajimos nuestras clases duplicadas a las clases de componentes.
Espero que hayas podido probar cómo Tailwind puede tener un impacto en tus propios proyectos. Si desea jugar con este proyecto, no dude en clonar el repositorio y experimentar con Tailwind usted mismo. Como siempre, no dude en hacerme cualquier pregunta sobre Gorjeo. Y hasta la próxima, ¡feliz codificación!