Dividir cores no Tailwind CSS
Neste artigo, exploraremos a propriedade Tailwind Divide Color , sua sintaxe e como ela pode ser usada para criar divisores visualmente atraentes.
Essa classe adiciona uma borda ou divisor colorido entre os elementos filhos de um contêiner.
Com CSS, usamos a propriedade Color para fazer isso.
No Tailwind CSS, todas essas propriedades são cobertas na forma de classe pela classe de cores divididas.
Sintaxe
A sintaxe para usar o Tailwind Divide Color é simples.
Para usar o utilitário, você precisa adicionar a classe “ dividir ” seguida de um nome de cor ou um código de cor hexadecimal.
<element class="divide-{color}">...</element>
Classes de cores divididas com vento de cauda
| Aulas | Visão geral |
| divida-transparente | A cor do divisor é transparente. |
| corrente divisora | Com base na cor do elemento pai, a cor do divisor será determinada. |
| divide-negro | A cor do divisor é preta neste caso. |
| divide-branco | A cor do divisor é definida como branco. |
| dividir-cinza-50 | Usando esta classe, a cor do divisor é definida como cinza. |
| dividir-vermelho-50 | Nesse caso, a cor do divisor é definida como vermelho. |
| dividir-azul-50 | A cor do divisor é definida como azul. |
| dividir-índigo-50 | Usando esta classe, a cor do divisor é definida como índigo. |
| divida-roxo-50 | Roxo é usado como a cor do divisor. |
| dividir-verde-50 | O divisor é exibido na cor verde. |
| dividir-amarelo-50 | A cor da divisão será amarela. |
| divida-rosa-50 | Rosa é usado como a cor do divisor. |
| divida-rosa-50 | Usando esta classe, a cor do divisor é definida como rosa. |
| divide-fúcsia-50 | Fúcsia é usado como a cor do divisor. |
| dividir-violeta-50 | A cor da divisão será violeta. |
| divida-céu-50 | A cor da divisão será o céu. |
| divida-ciano-50 | Usando esta classe, a cor do divisor é definida como ciano. |
| divide-teal-50 | Teal é usado como a cor do divisor. |
| dividir-esmeralda-50 | Nesse caso, a cor do divisor é definida como esmeralda. |
| divide-cal-50 | A cor da divisão será limão. |
| dividir-âmbar-50 | O âmbar é usado como a cor do divisor. |
| divide-laranja-50 | Usando esta classe, a cor do divisor é definida como laranja. |
| divide-neutro-50 | Nesse caso, a cor do divisor é definida como neutra. |
| divide-pedra-50 | A cor da divisão será pedra. |
| divide-zinco-50 | O zinco é usado como a cor do divisor. |
Observação: os valores de cor podem ser alterados de 50 a 900, e o salto no valor deve ser de 100 após 100 (por exemplo, 100,200,300, etc).
Importante: Após o valor da cor, a opacidade pode ser definida colocando o valor da opacidade após uma barra, como divide-blue-400/25. Isso define a opacidade para 25%. Valores arbitrários também podem ser definidos, como divide-blue-400/[0,25], que também define a opacidade em 25%.
O exemplo a seguir retrata como definir a opacidade de uma cor de divisão Tailwind usando cores diferentes:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Divide Color Class in Tailwind CSS
class="mx-4 bg-gray-200 p-2 font-medium rounded-md text-slate-800"
class="grid grid-cols-2 divide-x-4 divide-zinc-400/50"
MrExamples
Tailwind CSS
style="height:15px"
class="grid grid-cols-2 divide-x-4 divide-indigo-600/60"
MrExamples
Tailwind CSS
style="height:15px"
class="grid grid-cols-2 divide-x-4 divide-emerald-600/[0.40]"
MrExamples
Tailwind CSS
style="height:15px"
class="grid grid-cols-2 divide-x-4 divide-teal-500/[0.35]"
MrExamples
Tailwind CSS
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
