Que es tailwind css?
Tailwind CSS es un framework de CSS que se basa en clases utilitarias para diseñar interfaces sin necesidad de escribir CSS personalizado. En lugar de definir estilos en un archivo CSS separado, se utilizan clases directamente en los elementos HTML para aplicar estilos.
Características de Tailwind CSS:
Basado en clases utilitarias: No usa estilos predefinidos como Bootstrap, sino pequeñas clases reutilizables como text-center, bg-blue-500, p-4, etc.
Personalizable: Se puede configurar en un archivo tailwind.config.js para modificar colores, tamaños y otros aspectos.
Optimizado para producción: Usa PurgeCSS para eliminar clases no utilizadas, reduciendo el tamaño final del CSS.
Modular y flexible: Permite construir cualquier diseño sin restricciones de componentes predefinidos.
---
Ejemplo de Tailwind CSS en HTML
Este ejemplo muestra un botón estilizado con Tailwind:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700">
Click aquí
</button>
</body>
</html>
Explicación del código:
1. Se incluye el CDN de Tailwind (https://cdn.tailwindcss.com).
2. El body usa flex, items-center y justify-center para centrar el contenido.
3. Se usa h-screen para que el body ocupe toda la altura de la pantalla.
4. El botón tiene:
bg-blue-500: Fondo azul.
text-white: Texto blanco.
font-bold: Texto en negrita.
py-2 px-4: Espaciado interno vertical y horizontal.
rounded: Bordes redondeados.
hover:bg-blue-700: Cambia el fondo al pasar el cursor.
Con esto, Tailwind permite diseñar sin escribir CSS adicional.
Comentarios
Publicar un comentario