Al codificar una aplicación desde cero, desea que refleje su marca única, responda a cualquier dispositivo y sea fácil de escribir y mantener, y estos son probablemente solo algunos elementos de su lista de deseos.
Al crear con CSS Tailwind, puede desmarcar estos elementos de su lista. Tailwind CSS es una plataforma para crear y personalizar aplicaciones rápidamente sin escribir CSS personalizado.
Para entender por qué más de 200.000 páginas activas en Internet utilizan Tailwind CSSvamos a tratar con:
¿Qué es CSS Tailwind?
Tailwind CSS es una plataforma CSS específica para herramientas que permite a los usuarios crear aplicaciones de forma más rápida y sencilla. Con las clases de utilidad, puede controlar el diseño, el color, el espaciado, la tipografía, las sombras y más para crear un diseño de componente completamente personalizado, sin dejar su HTML ni escribir una sola línea de CSS personalizado.
Por ejemplo, suponga que desea crear un botón con una altura fija, relleno horizontal, color de fondo negro, bordes redondeados y una fuente blanca seminegrita. Este es el código HTML que usará:
<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">Buy now</button>
HTML incluye seis clases de utilidad. Vamos a desglosar cada uno de ellos a continuación:
- h-10: Esta clase establece el botón a una altura fija de 10 unidades.
- px-6: Esta clase establece el relleno horizontal del botón en 6 unidades.
- fuente seminegrita: esta clase establece el grosor de la fuente del botón en negrita media.
- md redondeado: esta clase establece el radio del borde del botón para que tenga esquinas redondeadas.
- bg-negro: esta clase establece el color de fondo de un botón en negro.
- texto blanco: esta clase establece el color del texto del botón en blanco.
Como habrás adivinado, la curva de aprendizaje al usar CSS Tailwind consiste en familiarizarse con sus clases de utilidad. Pero una vez que haya hecho eso, podrá crear componentes personalizados de manera rápida y consistente como el botón a continuación.
Ahora que tenemos una mejor comprensión de la estructura CSS Tailwind, echemos un vistazo a algunos de los beneficios de usarla.
Ventajas de CSS Tailwind
Hay muchas ventajas al usar una plataforma CSS como Tailwind. A continuación se muestran los más importantes.
- Escribes menos CSS personalizado. Con Tailwind, diseña elementos utilizando clases preexistentes directamente en su código HTML. Al usar clases de utilidad de esta manera, puede crear sus propios proyectos sin escribir CSS.
- Guarda pequeños archivos CSS. Sin un marco como Tailwind, debe escribir CSS agregando nuevas funciones y componentes. Como resultado, sus archivos CSS continúan creciendo y se vuelven más pesados. Mediante el uso de herramientas como Flexbox y Tailwind Complementing, la mayoría de los estilos son reutilizables, por lo que rara vez necesitará escribir CSS nuevo.
- No tienes que pensar en los nombres de las clases.. En Tailwind, selecciona clases de un sistema de diseño predefinido. Esto significa que no tiene que molestarse en elegir nombres de clase «perfectos» para ciertos estilos y componentes, o recordar los complejos como sidebar-inner-wrapper.
- Puedes hacer cambios más seguros. Con el enfoque tradicional, si realiza cambios en CSS, podría romper algo en su sitio. A diferencia de CSS, las clases de herramientas en su HTML son locales. Esto significa que puede cambiarlos sin preocuparse por romper algo más en su sitio.
¿Por qué CSS Tailwind?
Ahora puede que se pregunte por qué usar Tailwind en lugar de otros marcos CSS. CSS Tailwind es una plataforma de bajo nivel. Esto significa que, a diferencia de otros marcos CSS como Bootstrap y Materialise, Tailwind no ofrece componentes completamente diseñados, como botones, listas desplegables y barras de navegación. En su lugar, ofrece clases de utilidad para que pueda crear sus propios componentes reutilizables.
Por esta razón, proporciona mucha más flexibilidad y control sobre la apariencia de la aplicación que otros frameworks CSS. Gracias a esto, puedes crear un sitio web más único.
Para obtener más información sobre qué es CSS Tailwind, cuáles son sus beneficios y por qué debería usarlo, mire este video:
Ejemplos de CSS Tailwind
Tailwind ofrece componentes y plantillas de interfaz de usuario, o «muestras», para ayudarlo a comenzar rápidamente con el desarrollo de su aplicación.
Es depósito creado por Tailwind que incluye ejemplos de héroes de la página de destino, secciones de funciones, formularios de suscripción a boletines, tablas, ventanas modales, formularios de pago, carritos de compras y más. Puede obtener el código para la mayoría o todos estos ejemplos por una tarifa de paquete única.
Otro depósito está hecho por miembros de la comunidad y es de código abierto. A continuación nos centraremos en ejemplos de este repositorio.
Formulario de viento de cola CSS
Para permitir que los usuarios se suscriban al boletín, puede usar Tailwind para crear un formulario de consentimiento por correo electrónico.
Para crear un formulario de consentimiento de correo electrónico simple como el que se muestra arriba, puede usar el siguiente código:
<div>
<form class="m-4 flex">
<input class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" placeholder="your@mail.com"/>
<button class="px-8 rounded-r-lg bg-yellow-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r">Subscribe</button>
</form>
</div>
Para personalizar el borde, el color de fondo, el color del texto y otros aspectos de este formulario, puede cambiar las clases de herramientas border- {style}, bg- {color} y text- {color}, entre otras.
Consejo para profesionales: Agregue un número a las clases de herramientas border- {color}, bg- {color} y text- {color} para usar un tono La paleta de colores predeterminada de Tailwind.
Barra de búsqueda CSS Tailwind
Para permitir que los usuarios busquen su aplicación en función de una palabra clave, puede usar Tailwind para crear una barra de búsqueda.
Para crear una barra de búsqueda con un ícono y un botón de envío como el que se muestra arriba, puede usar el siguiente código:
<div class="max-w-2xl mx-auto">
<form class="flex items-center">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
</div>
<button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>
</form>
</div>
Consejo para profesionales: Use la clase de utilidad w-full para establecer el ancho del cuadro de búsqueda al 100%.
Control deslizante de viento de cola CSS
Para moverse entre varios elementos e imágenes, puede usar Tailwind para crear un control deslizante o un componente de carrusel.
Para crear un control deslizante similar al que se muestra arriba, puede usar el siguiente código HTML:
<div class="h-screen w-full overflow-hidden flex flex-nowrap text-center" id="slider">
<div class="bg-blue-600 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">Your Big Ideia</h2>
<p class="max-w-md">It's fast, flexible, and reliable — with zero-runtime.</p>
</div>
<div class="bg-pink-400 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">Tailwind CSS works by scanning all of your HTML</h2>
<p class="max-w-md">It's fast, flexible, and reliable — with zero-runtime.</p>
</div>
<div class="bg-teal-500 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">React, Vue, and HTML</h2>
<p class="max-w-md">Accessible, interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you’d rather write any necessary JS yourself.</p>
</div>
</div>
Nota: este componente se creó sin una biblioteca JS, pero necesitará el siguiente código JavaScript para ejecutar el control deslizante.
<script>
document.addEventListener('DOMContentLoaded', () => {
const slider = document.querySelector('#slider');
setTimeout(function moveSlide() {
const max = slider.scrollWidth - slider.clientWidth;
const left = slider.clientWidth;if (max === slider.scrollLeft) {
slider.scrollTo({left: 0, behavior: 'smooth'})
} else {
slider.scrollBy({left, behavior: 'smooth'})
}
setTimeout(moveSlide, 2000)
}, 2000)
})
</script>
Consejo para profesionales: Agregue la clase de utilidad flex-nowrap al div principal para evitar que se ajuste, y agregue la clase de utilidad flex-none a los div (diapositivas) secundarios para evitar que se agranden o se reduzcan.
Tabla de precios de CSS Tailwind
Para mostrar a los clientes varios planes premium con diferentes características y precios, puede usar CSS Tailwind para crear una tabla de precios.
Para crear una sección de «Introducción» en una tabla de precios como la que se muestra arriba, puede usar el siguiente código:
<section class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto"><div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Intro</p>
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$19 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
<div class="mt-8 space-y-8">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
</div>
</div>
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
Choose plan
</button>
</div>
</div>
</div>
</section>
Nota: este código solo creará el primer contenedor para el plan «Intro». Para crear contenedores para los planes «Básico», «Popular» y «Empresarial», deberá copiar este código reemplazando el texto del nombre y el precio de cada plan.
Consejo para profesionales: Agregue el modificador «hover:» delante del nombre de la clase como «bg-gray-200» para aplicar esta clase de utilidad condicionalmente (es decir, hacer que el contenedor cambie el color de fondo solo cuando el usuario pasa el cursor sobre él).
Más ejemplos, como la creación de una barra lateral con CSS Tailwind, se pueden encontrar en este video:
Usando CSS Tailwind para acelerar la codificación
CSS Tailwind acelera la escritura y el mantenimiento del código de la aplicación. Al usar esta arquitectura orientada a herramientas, no necesita escribir CSS personalizado para diseñar su aplicación. En su lugar, puede usar clases de utilidad para controlar el relleno, el margen, el color, la fuente, la sombra y otros elementos de su aplicación.
Estas clases de herramientas pueden requerir algo de aprendizaje para familiarizarse con ellas, pero una vez que lo haga, podrá crear y mantener aplicaciones más rápido que nunca.
