Cor do texto do vento de cauda
Neste artigo, exploraremos as diferentes maneiras de definir a cor do texto com as cores de texto do Tailwind .
A cor do texto desempenha um papel crucial no design da web, pois afeta a legibilidade e o apelo visual.
Escolher a cor certa para o seu texto pode ajudar a destacá-lo e chamar a atenção para informações importantes em seu site.
O utilitário de cor de texto no Tailwind CSS pode ser usado para definir a cor do texto exibido na tela.
Classes de cores de texto do Tailwind
Você pode definir a cor do texto de um elemento usando uma variedade de classes de cores de texto do Tailwind:
| Aulas | Visão geral |
| herança de texto | O texto herdará a cor do elemento pai. |
| texto atual | Essa classe é usada para definir a cor do texto para sua cor de texto atual. |
| texto transparente | A propriedade de cor do elemento de texto é definida como transparente usando esta classe. |
| texto preto | Como resultado, a cor do texto resultante é preta. |
| texto em branco | Usando esta classe, a cor do texto é definida como branco. |
| text-slate-50 | O objetivo desta classe é atribuir um tom de azul acinzentado ao texto de um elemento. |
| texto-cinza-50 | Esta classe é utilizada para atribuir um tom de cor cinza ao elemento de texto. |
| texto-zinco-50 | A cor do texto é definida como um tom de verde acinzentado. |
| texto-neutro-50 | O texto resultante é um tom de cor neutra acinzentada. |
| texto-pedra-50 | Como resultado dessa classe, o texto tem um tom de marrom acinzentado. |
| texto-vermelho-50 | A cor do elemento de texto que usa esta classe é um tom de vermelho. |
| texto-laranja-50 | Um tom de laranja é usado para a cor do texto. |
| texto-âmbar-50 | A cor do texto é definida como um tom de âmbar usando esta classe. |
| texto-amarelo-50 | Esta classe é utilizada para aplicar um tom de amarelo ao elemento de texto. |
| text-lime-50 | O objetivo desta classe é definir a cor do elemento de texto para um tom de limão. |
| texto-verde-50 | A propriedade de cor do texto é definida como um tom de verde usando esta classe. |
| texto-esmeralda-50 | Ele define a cor do texto para um tom de verde claro. |
| texto-teal-50 | Nesse caso, o texto é verde-azulado. |
| texto-ciano-50 | Essa classe é usada para definir a cor do texto para um tom de ciano. |
| text-sky-50 | Ele define a cor do texto para um tom de azul. |
| texto-azul-50 | Um tom de azul é usado para exibir o texto. |
| texto-índigo-50 | A cor do elemento de texto resultante é definida como um tom de índigo. |
| texto-violeta-50 | O texto é exibido na tela usando um tom de violeta. |
| texto-roxo-50 | Esta classe é utilizada para definir a cor do texto para um tom de roxo. |
| texto-fúcsia-50 | Um tom de rosa-roxo é usado para exibir o texto. |
| texto-rosa-50 | Um tom de rosa é usado para exibir o texto. |
| texto-rosa-50 | O objetivo desta classe é definir a cor do elemento de texto para um tom de rosa. |
Observação : os valores de cor denotam a intensidade da cor e podem ser ajustados de 50 a 900 , sendo 50 o mais claro e 900 o mais escuro. Os valores de cor são 50.100 a 900 com incrementos de 100 .
A opacidade do texto pode ser ajustada usando o modificador de opacidade de cor, como aplicar 50% de opacidade ao texto preto usando a classe “texto preto/50”.
Os valores de opacidade que podem ser usados são definidos no artigo da classe de opacidade.
Você também pode usar valores arbitrários para especificar a opacidade, como text-black/[0.5] é usado para aplicar 50% de opacidade ao texto preto.
Sintaxe
<element class="text-cyan-600">...</element>
Este exemplo ilustra as várias classes de cores de texto do Tailwind para uma melhor visualização:
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
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-medium"Text Color Class in Tailwind
class="bg-gray-50 p-4 font-medium w-fit mx-auto text-start rounded"
class="text-current p-2"
MrExamples using text-current
class="text-black p-2"
MrExamples using text-black
class="text-gray-700 p-2"
MrExamples using text-gray-700
class="text-red-700 p-2"
MrExamples using text-red-700
class="text-indigo-700 p-2"
MrExamples using text-indigo-700
class="text-blue-700 p-2"
MrExamples using text-blue-700
class="text-green-700 p-2"
MrExamples using text-green-700
class="text-yellow-700 p-2"
MrExamples using text-yellow-700
class="text-pink-700 p-2"
MrExamples using text-pink-700
class="text-purple-700 p-2"
MrExamples using text-purple-700
O exemplo a seguir abrange outras classes de cores de texto Tailwind para uma compreensão clara:
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
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-medium"Text Color Class in Tailwind
class="bg-gray-50 p-4 font-medium w-fit mx-auto text-start rounded"
class="text-slate-700 p-2"
MrExamples using text-slate-700
class="text-neutral-500 p-2"
MrExamples using text-neutral-500
class="text-fuchsia-500 p-2"
MrExamples using text-fuchsia-500
class="text-amber-400 p-2"
MrExamples using text-amber-400
class="text-violet-700 p-2"
MrExamples using text-violet-700
class="text-emerald-600 p-2"
MrExamples using text-emerald-600
class="text-orange-500 p-2"
MrExamples using text-orange-500
class="text-zinc-700 p-2"
MrExamples using text-zinc-700
class="text-rose-400 p-2"
MrExamples using text-rose-400
class="text-sky-700 p-2"
MrExamples using text-sky-700
Um exemplo de modificação da opacidade da cor do texto é fornecido abaixo:
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-medium"Text Color Class in Tailwind
class="bg-gray-50 p-4 font-medium w-fit mx-auto text-start rounded"
class="text-black/80 p-2"
MrExamples using text-black/80
class="text-black/60 p-2"
MrExamples using text-black/60
class="text-black/40 p-2"
MrExamples using text-black/40
class="text-black/[0.5] p-2"
MrExamples using text-black/[0.5]
class="text-black/[0.3] p-2"
MrExamples using text-black/[0.3]
class="text-black/[0.75] p-2"
MrExamples using text-black/[0.75]
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
