Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Adicionando Sombras para Profundidade e Contraste | Conceitos Fundamentais e Estilização Básica
Tailwind CSS para Desenvolvimento Web

bookAdicionando Sombras para Profundidade e Contraste

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.

index.html

index.html

copy

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.

index.html

index.html

copy

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.
question mark

Qual classe você usaria para adicionar uma sombra média a um elemento?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 5

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain how to add custom text-shadow utilities in Tailwind?

What are the different box shadow sizes available in Tailwind?

Can you break down the example code for these styles?

Awesome!

Completion rate improved to 3.57

bookAdicionando Sombras para Profundidade e Contraste

Deslize para mostrar o menu

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.

index.html

index.html

copy

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.

index.html

index.html

copy

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.
question mark

Qual classe você usaria para adicionar uma sombra média a um elemento?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 5
some-alt