O Tailwind CSS oferece uma variedade de utilitários para adicionar sombras aos elementos.

Sombras de Caixa

Utilize o prefixo shadow- seguido do valor de tamanho para adicionar sombras de caixa.

Sombras de Texto

O Tailwind CSS não inclui utilitários de text-shadow por padrão. No entanto, é possível adicionar utilitários personalizados de text-shadow no arquivo de configuração do Tailwind, se necessário.

Nota

Para consultar sombras específicas do Tailwind, acesse a documentação: Box Shadow.

Exemplo

A seguir, um exemplo prático de aplicação de estilização básica (cores, bordas, sombras) utilizando os utilitários apresentados.

Explicação

1. max-w-sm: Define a largura máxima do elemento como tamanho pequeno (24rem ou 384px);
2. mx-auto: Centraliza o elemento horizontalmente aplicando margens auto à esquerda e à direita;
3. p-4: Adiciona preenchimento de 1rem (16px) em todos os lados;
4. bg-white: Define a cor de fundo como branco;
5. rounded-lg: Aplica cantos arredondados grandes ao elemento;
6. shadow-md: Aplica uma sombra de caixa média ao elemento.

1. text-2xl: Define o tamanho da fonte como 2xl (1.5rem ou 24px);
2. font-bold: Aplica peso de fonte negrito;
3. text-gray-900: Define a cor do texto como cinza muito escuro (próximo ao preto);
4. mb-2: Adiciona uma margem inferior de 0.5rem (8px);
5. text-gray-700: Define a cor do texto como cinza médio;
6. mb-4: Adiciona uma margem inferior de 1rem (16px).

1. border: Adiciona uma borda ao redor do elemento;
2. border-blue-500: Define a cor da borda como um tom de azul;
3. rounded-md: Aplica cantos arredondados médios ao elemento;
4. p-4: Adiciona preenchimento de 1rem (16px) em todos os lados;
5. bg-blue-50: Define a cor de fundo como azul muito claro;
6. text-blue-700: Define a cor do texto como azul escuro.

1. mt-4: Adiciona uma margem superior de 1rem (16px);
2. p-4: Adiciona preenchimento de 1rem (16px) em todos os lados;
3. bg-green-100: Define a cor de fundo como verde muito claro;
4. border: Adiciona uma borda ao redor do elemento;
5. border-green-500: Define a cor da borda como um tom de verde;
6. rounded: Aplica cantos arredondados pequenos ao elemento;
7. shadow-sm: Aplica uma sombra pequena ao elemento;
8. text-green-700: Define a cor do texto como verde escuro.