Box Shadow no Tailwind CSS
Neste artigo, veremos de perto a sombra da caixa do Tailwind com exemplos para obter uma compreensão mais profunda de como ela funciona.
A classe Tailwind Box Shadow nos permite ajustar a box-shadow de um elemento.
As propriedades CSS Shadow Effect são usadas para conseguir isso em CSS.
No Tailwind CSS , essa classe aceita vários valores. Essas propriedades são abordadas no formulário de classe.
Sintaxe
<element class="shadow-{shadow-depth}">....</element>
Classes de sombra da caixa Tailwind
| Aulas | Visão geral |
| sombra-sm | O objetivo desta classe é produzir uma sombra sutil ou efeito desbotado em um elemento. |
| sombra | O objetivo desta classe é criar um efeito de sombra normal em um elemento. |
| sombra-md | Esta classe ajuda a criar uma sombra de tamanho médio em um elemento. |
| shadow-lg | Usando esta classe, uma sombra de tamanho grande é aplicada em um elemento. |
| shadow-xl | Uma sombra extra grande é aplicada em um elemento usando esta classe. |
| sombra-2xl | Esta classe aplica uma sombra dupla extra grande em um elemento. |
| sombra interior | Esta classe é única, pois aplica efeitos de sombra dentro do elemento. |
| sombra-nenhuma | Todos os efeitos de sombra são removidos usando esta classe. |
Para melhor compreensão, o exemplo abaixo ilustra o uso das classes shadow-none e shadow-md :
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 space-y-2"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Box Shadow Class in Tailwind CSS
class="font-semibold my-2 text-gray-500"shadow-none and shadow-md
class="grid grid-rows-2 grid-flow-col gap-5 text-center p-2 font-semibold"
class="shadow-none w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center"shadow-none
class="shadow-md w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center"shadow-md
O exemplo abaixo mostra a aplicação das classes shadow-sm e shadow-lg :
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 space-y-2"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Box Shadow Class in Tailwind CSS
class="font-semibold my-2 text-gray-500"shadow-sm and shadow-lg
class="grid grid-rows-2 grid-flow-col gap-5 text-center p-2 font-semibold"
class="shadow-sm w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center"shadow-sm
class="shadow-lg w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center"shadow-lg
Aqui está um breve exemplo das classes shadow e shadow-xl em ação:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 space-y-2"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Box Shadow Class in Tailwind CSS
class="font-semibold my-2 text-gray-500"shadow and shadow-xl
class="grid grid-rows-2 grid-flow-col gap-5 text-center p-2 font-semibold"
class="shadow w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center"shadow
class="shadow-xl w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center"shadow-xl
O exemplo a seguir utiliza as classes shadow-inner e shadow-2xl no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center mx-4 space-y-2"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Box Shadow Class in Tailwind CSS
class="font-semibold my-2 text-gray-500"shadow-2xl and shadow-inner
class="grid grid-rows-2 grid-flow-col gap-5 text-center p-2 font-semibold"
class="shadow-inner w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center"shadow-inner
class="shadow-2xl w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center"shadow-2xl
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
