CheatSheet de Tailwind CSS

Instalar Tailwind CSS

Para comenzar a usar Tailwind CSS, necesitas instalarlo a través de npm.

npm install tailwindcss

npx tailwindcss init

Generar el archivo de configuración

npx tailwindcss init

Configurar el archivo tailwind.config.js

El archivo tailwind.config.js te permite personalizar el framework a tus necesidades, como colores, fuentes y extensiones.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Visual Studio Code

Instalar la extensión Tailwind CSS IntelliSense para autocompletado y documentación.

CLI de Tailwind

Usar la CLI para compilar CSS, verificar clases y administrar configuraciones. Es útil para desarrollos rápidos y simplificar el flujo de trabajo.

Configuración básica

Modifica el archivo tailwind.config.js para personalizar tu configuración:

module.exports = {
  content: [
    "./src/**/*.{html,js}", // Especifica las rutas de tus archivos
  ],
  theme: {
    extend: {
      colors: {
        'custom-color': '#123456', // Agregar color personalizado
      },
    },
  },
  plugins: [],
}

Importar Tailwind en tu CSS

Crea un archivo CSS y agrega las directivas de Tailwind:

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

Construir CSS final

Para compilar tu CSS final, puedes usar el siguiente comando:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Flexbox

Clases para implementar flexbox.

<div class="flex justify-center items-center">
  <div class="flex-1">Elemento 1</div>
  <div class="flex-1">Elemento 2</div>
</div>

• flex: Activa flexbox en un contenedor.
• justify-center: Centra el contenido horizontalmente.
• items-center: Centra el contenido verticalmente.

Grid

Para crear un layout basado en CSS Grid.

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Elemento que ocupa dos columnas</div>
  <div>2</div>
  <div>3</div>
</div>

• grid-cols-3: Define una cuadrícula con 3 columnas.
• gap-4: Aplica un espacio de 1rem entre los elementos.

Tailwind utiliza un sistema de espaciado basado en una escala. Las clases para margen y padding siguen la siguiente convención

Margin

<div class="m-4">Margen en todos los lados</div>

<div class="mt-4">Margen superior</div>

<div class="my-4">Margen vertical</div>
<div class="mx-4">Margen horizontal</div>

Padding

<div class="p-4">Padding en todos los lados</div>


<div class="pt-4">Padding superior</div>

<div class="py-4">Padding vertical</div>
<div class="px-4">Padding horizontal</div>

Ancho y Alto

Controla el tamaño de los elementos con clases para ancho y alto.

<div class="w-1/2">Ancho 50%</div>
<div class="h-64">Altura de 16rem</div>
<div class="h-screen">Altura del 100% del viewport</div>

Max Width

Para limitar el tamaño máximo de un contenedor.

• max-w-sm: Limita el ancho máximo a 24rem.
• max-w-full: Ancho máximo del 100%.

Posición Absoluta y Relativa

Clases para posicionamiento de elementos.

<div class="relative">
  <div class="absolute top-0 left-0">Elemento posicionado</div>
</div>

• relative: El contenedor se convierte en un contexto de referencia.
• absolute: Posiciona un elemento de forma absoluta.
• top-0, left-0: Mueve el elemento a la esquina superior izquierda.

Z-Index

<div class="relative z-10">Elemento con z-index 10</div>

Texto básico y personalizado

<p class="text-gray-800">Texto oscuro</p>
<p class="text-red-500">Texto rojo</p>

• text-white: Texto en color blanco.
• text-gray-800: Texto color gris oscuro.
• text-red-500: Texto color rojo con una intensidad media.

Colores de fondo

<div class="bg-blue-500">Fondo azul</div>

• bg-blue-500: Fondo azul con intensidad media.

Gradientes

Para aplicar gradientes de fondo.

<div class="bg-gradient-to-r from-green-400 via-blue-500 to-purple-600">
  Gradiente de colores
</div>

• bg-gradient-to-r: Gradiente de izquierda a derecha.
• from-green-400, via-blue-500, to-purple-600: Definición de colores del gradiente.

Colores personalizados

Si has definido colores en tu configuración, puedes usarlos así:

<div class="bg-custom-color">Fondo con color personalizado</div>

Tamaños de texto

Controla el tamaño del texto con clases predefinidas.

<p class="text-sm">Texto pequeño</p>
<p class="text-lg">Texto grande</p>
<p class="text-xl">Texto extra grande</p>
<p class="text-2xl">Texto grande</p>

Alineación de Texto

Para alinear texto de diferentes formas.

• text-center: Centra el texto.
• text-right: Alinea el texto a la derecha.
• text-justify: Justifica el texto.

Peso de la fuente

Controla el grosor del texto.

<p class="font-bold">Texto en negrita</p>
<p class="font-light">Texto ligero</p>

Estilos de texto

<p class="italic">Texto en cursiva</p>
<p class="underline">Texto subrayado</p>

Bordes

Controla el grosor y estilo del borde de un elemento.

<div class="border border-gray-300 rounded-lg p-4">
  Caja con borde y esquinas redondeadas
</div>

• border: Aplica un borde estándar.
• border-gray-300: Borde gris.

Bordes redondeados

<div class="rounded">Borde redondeado</div>
<div class="rounded-lg">Borde muy redondeado</div>

• rounded-lg: Bordes redondeados de gran tamaño.

Estilos de borde

<div class="border-dashed">Borde punteado</div>
<div class="border-double">Borde doble</div>

Sombra

Añade sombras a los elementos.

<div class="shadow-lg">
  Caja con sombra
</div>

• shadow-xl: Sombra intensa.
• shadow-lg: Sombra de gran tamaño.
• shadow-sm: Sombra pequeña.

Hover

Aplica estilos cuando un usuario pasa el mouse sobre el elemento.

<button class="bg-blue-500 hover:bg-blue-700 text-white">Botón</button>

• hover:bg-blue-700: Cambia el color de fondo al hacer hover.

Estado de focus

<input type="text" class="border border-gray-300 focus:border-blue-500 rounded p-2">

Estado de active

<button class="bg-blue-500 active:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Botón Activo
</button>

Media Queries

Tailwind proporciona clases utilitarias que se pueden aplicar solo en ciertas pantallas. Se utilizan prefijos como sm:, md:, lg:, xl:.

• sm:: Para pantallas pequeñas (min-width: 640px).
• md:: Para pantallas medianas (min-width: 768px).
• lg:: Para pantallas grandes (min-width: 1024px).

<div class="text-sm md:text-lg lg:text-2xl">
  Texto con tamaño adaptativo
</div>

Transiciones

Para aplicar transiciones entre estados de estilo.

<button class="bg-red-500 hover:bg-red-700 transition duration-500">
  Botón con transición
</button>

• transition: Aplica una transición suave entre cambios de estado.
• duration-500: Duración de la transición (500ms).

Transformaciones

Para rotar, escalar y modificar elementos.

<div class="transform hover:scale-110">
  Escalar al hacer hover
</div>

• transform: Habilita las transformaciones.
• hover:scale-110: Escala al 110% al hacer hover.

@apply permite aplicar varias clases a un solo elemento dentro de un archivo CSS.

/* styles.css */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white font-bold rounded;
}

@variants para generar variantes de clases CSS (por ejemplo, para diferentes estados como hover o focus).

/* styles.css */
@variants hover {
  .btn {
    @apply bg-blue-700;
  }
}

Botón básico

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Botón
</button>

Botón con efectos de hover

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Botón Hover
</button>

Tarjeta básica

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="imagen.jpg" alt="Imagen">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Título de la tarjeta</div>
    <p class="text-gray-700 text-base">Descripción de la tarjeta.</p>
  </div>
</div>

Entrada de texto

<input type="text" class="border border-gray-300 rounded p-2 w-full" placeholder="Ingrese texto">

Botón de envío

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
  Enviar
</button>

Crear temas personalizados

Puedes crear diferentes temas cambiando la configuración en tailwind.config.js. Por ejemplo, puedes definir diferentes paletas de colores o fuentes para varios contextos.

Uso de plugins

Tailwind tiene un ecosistema de plugins. Puedes instalar plugins adicionales para extender la funcionalidad. Por ejemplo, el plugin @tailwindcss/forms para estilos de formularios:

npm install @tailwindcss/forms

Y añadirlo a tu configuración:

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