Tailwind CSS ofrece una variedad de utilidades para agregar sombras a los elementos.

Sombras de caja

Utiliza el prefijo shadow- seguido del valor de tamaño para agregar sombras de caja.

Sombras de texto

Tailwind CSS no incluye utilidades de text-shadow por defecto. Sin embargo, puedes agregar fácilmente utilidades personalizadas de text-shadow en tu archivo de configuración de Tailwind si es necesario.

Nota

Si necesitas profundizar en las sombras específicas de Tailwind, consulta la documentación: Box Shadow.

Ejemplo

A continuación se muestra un ejemplo práctico de cómo aplicar estilos básicos (colores, bordes, sombras) utilizando las utilidades que hemos aprendido.

Explicación

1. max-w-sm: Establece el ancho máximo del elemento a tamaño pequeño (24rem o 384px);
2. mx-auto: Centra el elemento horizontalmente aplicando márgenes auto a la izquierda y derecha;
3. p-4: Agrega un relleno de 1rem (16px) en todos los lados;
4. bg-white: Establece el color de fondo a blanco;
5. rounded-lg: Aplica esquinas redondeadas grandes al elemento;
6. shadow-md: Aplica una sombra de caja mediana al elemento.

1. text-2xl: Establece el tamaño de fuente en 2xl (1.5rem o 24px);
2. font-bold: Aplica peso de fuente en negrita;
3. text-gray-900: Define el color del texto como un gris muy oscuro (casi negro);
4. mb-2: Agrega un margen inferior de 0.5rem (8px);
5. text-gray-700: Define el color del texto como un gris medio;
6. mb-4: Agrega un margen inferior de 1rem (16px).

1. border: Agrega un borde alrededor del elemento;
2. border-blue-500: Define el color del borde como un tono de azul;
3. rounded-md: Aplica esquinas medianamente redondeadas al elemento;
4. p-4: Agrega un relleno de 1rem (16px) en todos los lados;
5. bg-blue-50: Define el color de fondo como un azul muy claro;
6. text-blue-700: Define el color del texto como un azul oscuro.

1. mt-4: Agrega un margen superior de 1rem (16px);
2. p-4: Agrega un relleno de 1rem (16px) en todos los lados;
3. bg-green-100: Define el color de fondo como un verde muy claro;
4. border: Agrega un borde alrededor del elemento;
5. border-green-500: Define el color del borde como un tono de verde;
6. rounded: Aplica esquinas ligeramente redondeadas al elemento;
7. shadow-sm: Aplica una sombra pequeña al elemento;
8. text-green-700: Define el color del texto como un verde oscuro.