Tutorial TailwindCSS: Clases de bordes de Tailwind CSS

Bordes: border radius, border width, border color, border style de Tailwind CSS

En Tailwind CSS, las clases de utilidad para la manipulación de bordes permiten un control detallado sobre los elementos de la interfaz. A continuación se describen las principales clases y sus usos:

Border radius

Las clases de border radius permiten redondear los bordes de los elementos. Las clases estándar incluyen:

• rounded-none: Sin redondeo.
• rounded-sm: Pequeño redondeo.
• rounded: Redondeo por defecto.
• rounded-md: Redondeo mediano.
• rounded-lg: Gran redondeo.
• rounded-xl: Redondeo extra grande.
• rounded-2xl: Redondeo de dos veces extra grande.
• rounded-3xl: Redondeo de tres veces extra grande.
• rounded-full: Bordes completamente redondeados.

Ejemplo de uso:

<div class="rounded-lg bg-gray-200 p-4">Contenido con borde redondeado</div>

Border width

Las clases de border width permiten especificar el grosor del borde. Las clases disponibles son:

• border: Borde por defecto (1px).
• border-0: Sin borde.
• border-2: Borde de 2px.
• border-4: Borde de 4px.
• border-8: Borde de 8px.

Ejemplo de uso:

<div class="border-4 border-blue-500 p-4">Contenido con borde de 4px</div>

Border color

Las clases de border color permiten definir el color del borde. Tailwind CSS ofrece una amplia gama de colores predefinidos. Algunos ejemplos incluyen:

• border-transparent: Borde transparente.
• border-black: Borde negro.
• border-white: Borde blanco.
• border-gray-500: Borde gris (nivel 500).
• border-red-500: Borde rojo (nivel 500).
• border-blue-500: Borde azul (nivel 500).

Ejemplo de uso:

<div class="border-2 border-red-500 p-4">Contenido con borde rojo</div>

Border style

Las clases de border style permiten definir el estilo del borde, como sólido, discontinuo, etc. Las clases disponibles son:

• border-solid: Borde sólido.
• border-dashed: Borde discontinuo.
• border-dotted: Borde punteado.
• border-double: Borde doble.
• border-none: Sin borde.

Ejemplo de uso:

<div class="border-4 border-dashed border-green-500 p-4">Contenido con borde discontinuo</div>

Estas clases de utilidad de Tailwind CSS facilitan la personalización y el ajuste de los bordes de los elementos HTML de manera precisa y eficiente.

Separadores: divide width, divide color, divide style de Tailwind CSS

Tailwind CSS proporciona clases de utilidad específicas para gestionar los separadores entre elementos hijos de un contenedor. Estas clases permiten controlar el ancho, el color y el estilo de los separadores, proporcionando una gran flexibilidad en el diseño de interfaces.

Divide width

Las clases de divide width permiten especificar el grosor del separador entre los elementos hijos. Las clases disponibles incluyen:

• divide-x-0: Sin separador horizontal.
• divide-x-2: Separador horizontal de 2px.
• divide-x-4: Separador horizontal de 4px.
• divide-x-8: Separador horizontal de 8px.
• divide-y-0: Sin separador vertical.
• divide-y-2: Separador vertical de 2px.
• divide-y-4: Separador vertical de 4px.
• divide-y-8: Separador vertical de 8px.

Ejemplo de uso:

<div class="divide-y-4 divide-gray-200">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Divide color

Las clases de divide color permiten definir el color del separador. Tailwind CSS ofrece una amplia gama de colores predefinidos. Algunos ejemplos incluyen:

• divide-transparent: Separador transparente.
• divide-black: Separador negro.
• divide-white: Separador blanco.
• divide-gray-500: Separador gris (nivel 500).
• divide-red-500: Separador rojo (nivel 500).
• divide-blue-500: Separador azul (nivel 500).

Ejemplo de uso:

<div class="divide-y-2 divide-red-500">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Divide style

Las clases de divide style permiten definir el estilo del separador, como sólido, discontinuo, etc. Las clases disponibles son:

• divide-solid: Separador sólido.
• divide-dashed: Separador discontinuo.
• divide-dotted: Separador punteado.
• divide-double: Separador doble.
• divide-none: Sin separador.

Ejemplo de uso:

<div class="divide-y-2 divide-dotted divide-green-500">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Estas clases de utilidad de Tailwind CSS permiten personalizar los separadores entre los elementos hijos de un contenedor de manera precisa y eficiente, mejorando la organización y el diseño visual de las interfaces de usuario.

Outline: outline width, outline color, outline style, outline offset de Tailwind CSS

Tailwind CSS proporciona clases de utilidad para controlar las propiedades del contorno (outline) de los elementos, permitiendo definir el ancho, color, estilo y desplazamiento del contorno. Estas clases son útiles para resaltar elementos, especialmente en casos de accesibilidad y diseño interactivo.

Outline width

Las clases de outline width permiten especificar el grosor del contorno. Las opciones disponibles son:

• outline-0: Sin contorno.
• outline-1: Contorno de 1px.
• outline-2: Contorno de 2px.
• outline-4: Contorno de 4px.
• outline-8: Contorno de 8px.

Ejemplo de uso:

<button class="outline outline-2 outline-blue-500">Botón con contorno</button>

Outline color

Las clases de outline color permiten definir el color del contorno. Tailwind CSS ofrece una variedad de colores predefinidos. Algunos ejemplos incluyen:

• outline-transparent: Contorno transparente.
• outline-black: Contorno negro.
• outline-white: Contorno blanco.
• outline-gray-500: Contorno gris (nivel 500).
• outline-red-500: Contorno rojo (nivel 500).
• outline-blue-500: Contorno azul (nivel 500).

Ejemplo de uso:

<button class="outline outline-2 outline-red-500">Botón con contorno rojo</button>

Outline style

Las clases de outline style permiten definir el estilo del contorno, similar a los bordes. Las opciones disponibles son:

• outline-none: Sin contorno.
• outline-solid: Contorno sólido.
• outline-dashed: Contorno discontinuo.
• outline-dotted: Contorno punteado.
• outline-double: Contorno doble.

Ejemplo de uso:

<button class="outline-2 outline-dashed outline-green-500">Botón con contorno discontinuo</button>

Outline offset

Las clases de outline offset permiten definir la distancia entre el contorno y el borde del elemento. Las opciones disponibles son:

• outline-offset-0: Sin desplazamiento.
• outline-offset-1: Desplazamiento de 1px.
• outline-offset-2: Desplazamiento de 2px.
• outline-offset-4: Desplazamiento de 4px.
• outline-offset-8: Desplazamiento de 8px.

Ejemplo de uso:

<button class="outline outline-2 outline-blue-500 outline-offset-2">Botón con desplazamiento del contorno</button>

Estas clases de utilidad de Tailwind CSS permiten personalizar el contorno de los elementos de manera precisa y eficiente, mejorando tanto el diseño visual como la accesibilidad de las interfaces de usuario.

Sombras: box shadow, box shadow color, opacity de Tailwind CSS

En Tailwind CSS, las clases de utilidad para sombras (box shadow) permiten añadir profundidad y dimensión a los elementos de la interfaz. Las clases de box shadow ofrecen una variedad de opciones predefinidas para aplicar sombras de diferentes tamaños e intensidades.

Box shadow

Las clases de box shadow disponibles incluyen:

• shadow-none: Sin sombra.
• shadow-sm: Sombra pequeña.
• shadow: Sombra por defecto.
• shadow-md: Sombra mediana.
• shadow-lg: Sombra grande.
• shadow-xl: Sombra extra grande.
• shadow-2xl: Sombra de dos veces extra grande.
• shadow-inner: Sombra interna.

Ejemplo de uso:

<div class="shadow-lg bg-white p-6 rounded-md">Caja con sombra grande</div>

Box color

Las clases de box shadow color permiten definir el color de la sombra. Tailwind CSS ofrece una variedad de colores predefinidos para personalizar las sombras. Algunos ejemplos de estas clases son:

• shadow-black: Sombra negra.
• shadow-white: Sombra blanca.
• shadow-gray-500: Sombra gris (nivel 500).
• shadow-red-500: Sombra roja (nivel 500).
• shadow-blue-500: Sombra azul (nivel 500).

Ejemplo de uso:

<div class="shadow-lg shadow-red-500 bg-white p-6 rounded-md">Caja con sombra grande roja</div>

Opacity

Las clases de opacity permiten ajustar la opacidad de un elemento, lo que puede ser útil para modificar la transparencia de sombras y otros efectos visuales. Las clases de opacity disponibles van desde opacity-0 (completamente transparente) hasta opacity-100 (completamente opaco), en incrementos de 5 o 10.

Ejemplo de uso:

<div class="shadow-lg shadow-gray-500 opacity-75 bg-white p-6 rounded-md">Caja con sombra grande gris y opacidad del 75%</div>

Estas clases de utilidad de Tailwind CSS facilitan la adición y personalización de sombras en los elementos HTML, permitiendo ajustar tanto el tamaño y la dirección de las sombras como su color y opacidad, mejorando así la apariencia y la jerarquía visual en las interfaces de usuario.