Tailwind

Tailwind CSS es un framework de CSS que permite construir interfaces de usuario de manera rápida y eficiente utilizando clases utilitarias predefinidas. A diferencia de otros frameworks como Bootstrap, Tailwind no proporciona componentes preconstruidos, sino que ofrece una amplia gama de clases que puedes combinar para diseñar tus propios componentes.

Aquí hay algunos ejemplos de los elementos principales que tienes que considerar al usar Tailwind CSS:

Espaciado

El espaciado en Tailwind se controla mediante clases de margin y padding. Tailwind usa una escala numérica donde cada número representa un múltiplo de 0.25rem (4px).

Margin

El margin controla el espacio exterior alrededor de un elemento. Se puede aplicar en todas las direcciones:

• m-{tamaño}: margin en todas direcciones
• mx-{tamaño}: margin horizontal (izquierda y derecha)
• my-{tamaño}: margin vertical (arriba y abajo)
• mt-{tamaño}, mr-{tamaño}, mb-{tamaño}, ml-{tamaño}: margin específico por lado

Ejemplo:

http://localhost:3000

m-4: margin de 1rem (16px) en todos lados

mx-8 my-2: margin horizontal de 2rem, vertical de 0.5rem

mt-6: margin-top de 1.5rem (24px)

Padding

El padding controla el espacio interior de un elemento (entre el contenido y el borde). Usa la misma nomenclatura que margin:

• p-{tamaño}: padding en todas direcciones
• px-{tamaño}: padding horizontal
• py-{tamaño}: padding vertical
• pt-{tamaño}, pr-{tamaño}, pb-{tamaño}, pl-{tamaño}: padding específico por lado

Ejemplo:

http://localhost:3000

p-2: padding de 0.5rem (8px) en todos lados

px-8 py-4: padding horizontal de 2rem, vertical de 1rem

pt-6 pb-2: padding-top de 1.5rem, padding-bottom de 0.5rem

Dimensiones

Las dimensiones en Tailwind te permiten controlar el ancho y alto de los elementos. Tailwind ofrece clases utilitarias para tamaños fijos, porcentajes, y tamaños especiales como viewport.

Width (Ancho)

El width controla el ancho de un elemento. Tailwind ofrece diferentes opciones:

• w-{número}: ancho en escala de Tailwind (w-4 = 1rem, w-64 = 16rem)
• w-{fracción}: ancho en porcentajes (w-1/2 = 50%, w-1/3 = 33.33%, w-full = 100%)
• w-screen: ancho del viewport (100vw)
• w-auto: ancho automático según el contenido

Ejemplo:

http://localhost:3000

w-full: ancho del 100% del contenedor

w-1/2: ancho del 50% del contenedor

w-64: ancho fijo de 16rem (256px)

w-auto: ancho según contenido

Height (Altura)

El height controla la altura de un elemento. Similar al width, ofrece múltiples opciones:

• h-{número}: altura en escala de Tailwind (h-4 = 1rem, h-64 = 16rem)
• h-full: altura del 100% del contenedor
• h-screen: altura del viewport (100vh)
• h-auto: altura automática según el contenido

Ejemplo:

http://localhost:3000

h-full: 100% de altura

h-32: altura de 8rem (128px)

h-16: altura de 4rem (64px)

h-auto

Size (Ancho y Altura simultáneos)

La clase size-{tamaño} establece el mismo valor para width y height, útil para elementos cuadrados:

• size-16: width y height de 4rem (64px)
• size-32: width y height de 8rem (128px)

Ejemplo:

http://localhost:3000

size-16

size-24

size-32

Min/Max Width y Height

Tailwind permite establecer límites mínimos y máximos para las dimensiones:

• min-w-{tamaño}: ancho mínimo
• max-w-{tamaño}: ancho máximo (max-w-md = 28rem, max-w-lg = 32rem, max-w-xl = 36rem)
• min-h-{tamaño}: altura mínima
• max-h-{tamaño}: altura máxima

Ejemplo:

http://localhost:3000

max-w-md: ancho máximo de 28rem (448px). Este texto tiene un límite de ancho sin importar el tamaño del contenedor.

min-h-32: altura mínima de 8rem (128px)

max-h-20: altura máxima de 5rem (80px). Si el contenido es muy largo, aparecerá scroll. Este es un ejemplo de texto largo que excede la altura máxima establecida para demostrar el comportamiento.

Tipografía

La tipografía en Tailwind te permite controlar el aspecto visual del texto mediante clases utilitarias. Puedes modificar el tamaño, peso, alineación, color, y más propiedades de tus textos.

Font Size (Tamaño de fuente)

El tamaño de fuente controla qué tan grande o pequeño es el texto. Tailwind ofrece una escala predefinida:

• text-xs: extra pequeño (0.75rem / 12px)
• text-sm: pequeño (0.875rem / 14px)
• text-base: base (1rem / 16px)
• text-lg: grande (1.125rem / 18px)
• text-xl: extra grande (1.25rem / 20px)
• text-2xl a text-9xl: tamaños progresivamente más grandes

Ejemplo:

http://localhost:3000

text-xs: Texto extra pequeño (12px)

text-sm: Texto pequeño (14px)

text-base: Texto base (16px)

text-lg: Texto grande (18px)

text-xl: Texto extra grande (20px)

text-2xl: Texto 2XL (24px)

text-3xl: Texto 3XL (30px)

Font Weight (Peso de fuente)

El peso de fuente controla qué tan gruesa o delgada se ve la tipografía:

• font-thin: peso 100
• font-light: peso 300
• font-normal: peso 400
• font-medium: peso 500
• font-semibold: peso 600
• font-bold: peso 700
• font-extrabold: peso 800
• font-black: peso 900

Ejemplo:

http://localhost:3000

font-thin: Texto muy delgado (100)

font-light: Texto ligero (300)

font-normal: Texto normal (400)

font-medium: Texto medio (500)

font-semibold: Texto semi-negrita (600)

font-bold: Texto en negrita (700)

font-extrabold: Texto extra negrita (800)

font-black: Texto negro (900)

Text Align (Alineación de texto)

La alineación de texto controla cómo se distribuye el texto horizontalmente:

• text-left: alineado a la izquierda
• text-center: centrado
• text-right: alineado a la derecha
• text-justify: justificado

Ejemplo:

http://localhost:3000

text-left: Este texto está alineado a la izquierda

text-center: Este texto está centrado

text-right: Este texto está alineado a la derecha

text-justify: Este texto está justificado, lo que significa que se distribuye uniformemente entre los márgenes izquierdo y derecho.

Text Color (Color de texto)

Tailwind ofrece una amplia paleta de colores para el texto:

• text-{color}-{intensidad}: ejemplo text-blue-500, text-red-600
• Colores disponibles: gray, red, yellow, green, blue, indigo, purple, pink, etc.
• Intensidades: de 50 (más claro) a 950 (más oscuro)

Ejemplo:

http://localhost:3000

text-red-500: Texto en rojo

text-blue-500: Texto en azul

text-green-500: Texto en verde

text-purple-500: Texto en púrpura

text-amber-500: Texto en ámbar

text-gray-500: Texto en gris

Text Decoration y Transform

Tailwind también ofrece clases para decoración y transformación de texto:

• underline: subrayado
• line-through: tachado
• uppercase: mayúsculas
• lowercase: minúsculas
• capitalize: primera letra en mayúscula

Ejemplo:

http://localhost:3000

underline: Este texto está subrayado

line-through: Este texto está tachado

uppercase: este texto está en mayúsculas

lowercase: ESTE TEXTO ESTÁ EN MINÚSCULAS

capitalize: cada palabra inicia con mayúscula

Line Height (Altura de línea)

La altura de línea controla el espaciado vertical entre líneas de texto:

• leading-none: sin espacio adicional
• leading-tight: espaciado reducido
• leading-normal: espaciado normal
• leading-relaxed: espaciado relajado
• leading-loose: espaciado amplio

Ejemplo:

http://localhost:3000

leading-none: Esta es una línea de texto con altura de línea sin espacio adicional. Nota cómo las líneas están muy juntas.

leading-normal: Esta es una línea de texto con altura de línea normal. Es el espaciado estándar y cómodo para leer.

leading-loose: Esta es una línea de texto con altura de línea amplia. Hay mucho espacio entre las líneas.

Colores

Los colores en Tailwind son fundamentales para dar vida a tus diseños. Tailwind ofrece una paleta extensa de colores con diferentes intensidades que puedes aplicar a fondos, textos, bordes y más.

Background Color (Color de fondo)

El color de fondo se aplica con la clase bg-{color}-{intensidad}:

• Colores disponibles: slate, gray, red, orange, yellow, green, blue, indigo, purple, pink, etc.
• Intensidades: 50 (muy claro) hasta 950 (muy oscuro)
• Ejemplos: bg-blue-500, bg-red-600, bg-green-400

Ejemplo:

http://localhost:3000

bg-red-500: Fondo rojo

bg-blue-500: Fondo azul

bg-green-500: Fondo verde

bg-purple-500: Fondo púrpura

bg-amber-500: Fondo ámbar

bg-pink-500: Fondo rosa

Intensidades de color

Cada color tiene diferentes intensidades que van del 50 al 950. Mientras mayor sea el número, más oscuro es el color:

Ejemplo:

http://localhost:3000

bg-blue-50: Azul muy claro

bg-blue-100: Azul claro

bg-blue-300: Azul medio claro

bg-blue-500: Azul base

bg-blue-600: Azul medio oscuro

bg-blue-800: Azul oscuro

bg-blue-900: Azul muy oscuro

Border Color (Color de borde)

Los bordes también pueden tener color usando border-{color}-{intensidad}. Recuerda que necesitas definir el ancho del borde primero:

• border: borde de 1px
• border-2: borde de 2px
• border-4: borde de 4px

Ejemplo:

http://localhost:3000

border-2 border-red-500: Borde rojo

border-4 border-blue-500: Borde azul

border-4 border-green-500: Borde verde grueso

border-2 border-purple-500 border-dashed: Borde púrpura punteado

Opacity (Opacidad)

Puedes controlar la opacidad de colores de fondo, texto y bordes usando el modificador de opacidad:

• bg-{color}-{intensidad}/{opacidad}: ejemplo bg-blue-500/50 (50% de opacidad)
• Opacidades comunes: 25, 50, 75, 100

Ejemplo:

http://localhost:3000

bg-blue-500/100: Opacidad 100% (completamente opaco)

bg-blue-500/75: Opacidad 75%

bg-blue-500/50: Opacidad 50%

bg-blue-500/25: Opacidad 25% (muy transparente)

Gradientes

Tailwind permite crear gradientes de forma sencilla usando múltiples clases:

• bg-gradient-to-r: gradiente de izquierda a derecha
• bg-gradient-to-b: gradiente de arriba hacia abajo
• from-{color}: color inicial
• to-{color}: color final
• via-{color}: color intermedio (opcional)

Ejemplo:

http://localhost:3000

bg-gradient-to-r from-blue-500 to-purple-500

bg-gradient-to-b from-red-500 to-amber-500

bg-gradient-to-r from-green-500 via-blue-500 to-purple-500

bg-gradient-to-br from-pink-500 to-purple-500

Flexbox y Grid

Flexbox y Grid son sistemas de diseño fundamentales en CSS que Tailwind hace muy fáciles de usar. Te permiten crear layouts complejos y responsivos de manera eficiente.

Flexbox

Flexbox es ideal para organizar elementos en una dirección (horizontal o vertical) y controlar cómo se distribuyen y alinean.

Flex Direction (Dirección del flex)

La dirección del flex controla si los elementos se alinean horizontal o verticalmente:

• flex-row: elementos en fila (horizontal, por defecto)
• flex-col: elementos en columna (vertical)
• flex-row-reverse: fila inversa
• flex-col-reverse: columna inversa

Ejemplo:

http://localhost:3000

flex-row:

1

2

3

flex-col:

1

2

3

Justify Content (Justificación horizontal)

Controla cómo se distribuyen los elementos en el eje principal:

• justify-start: al inicio
• justify-center: centrado
• justify-end: al final
• justify-between: espacio entre elementos
• justify-around: espacio alrededor de elementos

Ejemplo:

http://localhost:3000

justify-start:

A

B

C

justify-center:

A

B

C

justify-between:

A

B

C

Align Items (Alineación vertical)

Controla cómo se alinean los elementos en el eje cruzado:

• items-start: al inicio
• items-center: centrado
• items-end: al final
• items-stretch: estirado (por defecto)

Ejemplo:

http://localhost:3000

items-start:

A

B

C

items-center:

A

B

C

Gap (Espacio entre elementos)

El gap crea espacio entre elementos flex sin necesidad de margins:

• gap-{tamaño}: espacio en todas direcciones
• gap-x-{tamaño}: espacio horizontal
• gap-y-{tamaño}: espacio vertical

Ejemplo:

http://localhost:3000

gap-2 (8px):

1

2

3

gap-8 (32px):

1

2

3

Grid

Grid es perfecto para crear layouts bidimensionales complejos con filas y columnas.

Grid Columns (Columnas)

Define cuántas columnas tendrá tu grid:

• grid-cols-{número}: número de columnas (grid-cols-2, grid-cols-3, grid-cols-4, etc.)
• grid-cols-12: sistema de 12 columnas (como Bootstrap)

Ejemplo:

http://localhost:3000

grid-cols-2:

1

2

3

4

grid-cols-3:

1

2

3

4

5

6

Grid Rows (Filas)

Define cuántas filas tendrá tu grid:

• grid-rows-{número}: número de filas (grid-rows-2, grid-rows-3, etc.)

Ejemplo:

http://localhost:3000

grid-rows-3:

1

2

3

4

5

6

Col Span (Expansión de columnas)

Permite que un elemento ocupe múltiples columnas:

• col-span-{número}: expande el elemento a través de N columnas
• col-span-full: ocupa todas las columnas disponibles

Ejemplo:

http://localhost:3000

grid-cols-3 con col-span:

col-span-3 (ocupa 3 columnas)

col-span-2

1

1

col-span-2

Grid Gap

Similar a Flexbox, Grid también usa gap para espaciar elementos:

• gap-{tamaño}: espacio entre filas y columnas

Ejemplo:

http://localhost:3000

gap-2 (8px):

1

2

3

gap-6 (24px):

1

2

3

Positions

El posicionamiento en Tailwind controla cómo se ubica un elemento en la página. Esto es fundamental para crear layouts complejos, modales, menús flotantes, y más.

Position Types (Tipos de posición)

Tailwind ofrece diferentes tipos de posicionamiento:

• static: posición normal (por defecto)
• relative: posición relativa a su posición original
• absolute: posición absoluta respecto al contenedor padre posicionado
• fixed: posición fija respecto al viewport
• sticky: mezcla entre relative y fixed

Ejemplo:

http://localhost:3000

relative:

relative top-10 left-10: Desplazado 10px desde su posición original

absolute:

absolute top-10 right-10

absolute bottom-10 left-10

Positioning Values (Valores de posición)

Puedes controlar exactamente dónde se posiciona un elemento:

• top-{tamaño}, right-{tamaño}, bottom-{tamaño}, left-{tamaño}
• inset-{tamaño}: aplica el mismo valor a todos los lados
• Valores comunes: 0, 1, 2, 4, 8, 16, etc. (en múltiplos de 0.25rem)

Ejemplo:

http://localhost:3000

top-0 left-0

top-0 right-0

Centrado

bottom-0 left-0

bottom-0 right-0

Z-Index (Índice de apilamiento)

El z-index controla qué elementos aparecen encima de otros:

• z-0: índice 0
• z-10, z-20, z-30, z-40, z-50: índices predefinidos
• Mayor número = más arriba en el apilamiento

Ejemplo:

http://localhost:3000

z-10 (arriba)

z-20 (más arriba)

z-30 (encima)

Estados y Pseudo-clases

Los estados y pseudo-clases en Tailwind permiten aplicar estilos cuando el usuario interactúa con elementos o cuando se cumplen ciertas condiciones.

Hover (Pasar el mouse)

El estado hover aplica estilos cuando el cursor está sobre un elemento:

• Sintaxis: hover:{clase}
• Ejemplo: hover:bg-blue-500, hover:text-white

Ejemplo:

http://localhost:3000

Pasa el mouse sobre los botones:

Focus (Enfoque en inputs)

El estado focus se aplica cuando un input o elemento interactivo está enfocado:

• Sintaxis: focus:{clase}
• Ejemplo: focus:border-blue-500, focus:ring-2

Ejemplo:

http://localhost:3000

Haz clic en los inputs para ver el efecto:

Active (Al hacer clic)

El estado active se aplica cuando estás haciendo clic en un elemento:

• Sintaxis: active:{clase}
• Ejemplo: active:bg-blue-700, active:scale-95

Ejemplo:

http://localhost:3000

Haz clic y mantén presionado:

Disabled (Deshabilitado)

El estado disabled aplica estilos a elementos deshabilitados:

• Sintaxis: disabled:{clase}
• Ejemplo: disabled:opacity-50, disabled:cursor-not-allowed

Ejemplo:

http://localhost:3000

Botones con estado disabled:

Group Hover (Hover en grupo)

Group hover aplica estilos a un elemento cuando se hace hover sobre su contenedor padre:

• Sintaxis: Aplicar group al padre y group-hover:{clase} al hijo
• Útil para cards y componentes complejos

Ejemplo:

http://localhost:3000

Pasa el mouse sobre las cards:

Card 1

group-hover en el título

Card 2

group-hover con transform

Personalización

Tailwind CSS permite personalizar valores más allá de su escala predefinida usando valores arbitrarios. Esto te da la flexibilidad de usar valores exactos cuando los necesites, sin salir del sistema de utilidades de Tailwind.

Valores Arbitrarios

Los valores arbitrarios te permiten especificar valores personalizados para cualquier clase de Tailwind usando corchetes [].

Colores Personalizados

Puedes usar cualquier color en formato hexadecimal, RGB, HSL, o incluso nombres de color CSS:

• bg-[#1da1f2]: color de fondo personalizado
• text-[rgb(255,0,0)]: color de texto en RGB
• border-[#ff6347]: color de borde personalizado

Ejemplo:

http://localhost:3000

bg-[#1da1f2]: Color azul Twitter personalizado

bg-[#ff6b6b]: Color rojo coral personalizado

border-[#fdcb6e] border-[3px]: Borde amarillo personalizado

text-[rgb(255,107,107)]: Texto en formato RGB

Tamaños Personalizados

Puedes especificar dimensiones exactas en px, rem, em, %, vw, vh, etc.:

• w-[347px]: ancho de 347 píxeles
• h-[32rem]: altura de 32rem
• text-[22px]: tamaño de fuente de 22px
• p-[18px]: padding de 18px

Ejemplo:

http://localhost:3000

w-[347px] h-[100px]: Ancho de 347px exacto

w-[75%] p-[18px]: Ancho del 75% con padding personalizado

text-[22px]: Tamaño de fuente exacto de 22 píxeles

Espaciado Personalizado

Crea espaciados exactos para margin y padding:

• m-[13px]: margin de 13px
• p-[2.5rem]: padding de 2.5rem
• gap-[25px]: gap de 25px entre elementos

Ejemplo:

http://localhost:3000

p-[13px] mb-[25px]: Padding personalizado de 13px

gap-[25px]

gap-[25px]

gap-[25px]

Border Radius Personalizado

Define radios de borde exactos:

• rounded-[12px]: border radius de 12px
• rounded-[50%]: círculo perfecto

Ejemplo:

http://localhost:3000

rounded-[12px]

rounded-[25px]

rounded-[50%]

Sombras Personalizadas

Crea efectos de sombra personalizados:

• shadow-[0_4px_6px_rgba(0,0,0,0.1)]: sombra personalizada

Ejemplo:

http://localhost:3000

shadow-[0_4px_6px_rgba(0,0,0,0.1)]: Sombra suave

shadow-[0_10px_30px_rgba(59,130,246,0.3)]: Sombra azul

shadow-[0_20px_50px_rgba(0,0,0,0.2)]: Sombra pronunciada

Font Weight y Line Height Personalizados

Especifica pesos de fuente y alturas de línea exactos:

• font-[450]: peso de fuente personalizado
• leading-[1.75]: altura de línea específica

Ejemplo:

http://localhost:3000

font-[350]: Peso de fuente 350 (entre light y normal)

font-[550]: Peso de fuente 550 (entre medium y semibold)

font-[650]: Peso de fuente 650 personalizado

leading-[1.75]: Esta línea tiene una altura de línea de 1.75, lo que proporciona un espaciado cómodo para lectura. Puedes notar cómo el texto respira mejor con este espaciado personalizado.

Grid Template Columns/Rows Personalizado

Define estructuras de grid completamente personalizadas:

• grid-cols-[200px_1fr_2fr]: columnas con tamaños específicos
• grid-rows-[100px_auto_100px]: filas personalizadas

Ejemplo:

http://localhost:3000

grid-cols-[200px_1fr_2fr]:

200px

1fr

2fr

grid-cols-[100px_auto_100px]:

100px

auto (se expande)

100px

Transformaciones Personalizadas

Aplica transformaciones CSS personalizadas:

• rotate-[17deg]: rotación personalizada
• scale-[1.15]: escala específica
• translate-x-[13px]: traslación exacta

Ejemplo:

http://localhost:3000

rotate-[17deg]

scale-[1.25]

-translate-y-[15px]

Combinando Valores Arbitrarios

Puedes combinar múltiples valores arbitrarios para crear diseños únicos:

Ejemplo:

http://localhost:3000

Card personalizada con:

• bg-[#1da1f2]
• p-[24px]
• rounded-[15px]
• text-[19px]
• font-[550]
• shadow-[0_8px_20px_rgba(29,161,242,0.3)]

Gradiente personalizado con sombra y bordes redondeados

bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]

Propiedades CSS Arbitrarias

Tailwind también permite usar propiedades CSS completamente personalizadas con la sintaxis de corchetes:

• [clip-path:circle(50%)]: aplica cualquier propiedad CSS
• [backdrop-filter:blur(10px)]: efectos de fondo

Ejemplo:

http://localhost:3000

clip-path: circle

clip-path: polygon

Breakpoints y Responsividad

Los breakpoints en Tailwind te permiten crear diseños responsivos que se adaptan a diferentes tamaños de pantalla. Tailwind usa un enfoque mobile-first, lo que significa que los estilos sin prefijo se aplican en todos los tamaños, y agregas prefijos para pantallas más grandes.

Breakpoints Predefinidos

Tailwind tiene 5 breakpoints predefinidos:

• sin prefijo: Todos los tamaños (0px en adelante) - Mobile first
• sm:: Small devices (640px en adelante) - Tablets pequeñas
• md:: Medium devices (768px en adelante) - Tablets
• lg:: Large devices (1024px en adelante) - Laptops
• xl:: Extra large devices (1280px en adelante) - Desktops
• 2xl:: 2X Extra large (1536px en adelante) - Pantallas grandes

Tabla de referencia:

Prefijo	Tamaño mínimo	Descripción
(none)	0px	Mobile (por defecto)
sm:	640px	Tablet pequeña
md:	768px	Tablet
lg:	1024px	Laptop
xl:	1280px	Desktop
2xl:	1536px	Pantalla grande

Sintaxis Básica

La sintaxis es simple: {breakpoint}:{clase}

• md:text-center: Texto centrado desde 768px en adelante
• lg:bg-blue-500: Fondo azul desde 1024px en adelante
• sm:flex: Display flex desde 640px en adelante