Tailwind Fill – um guia completo
Neste artigo, veremos de perto a propriedade Tailwind Fill com exemplos para obter uma compreensão clara.
Usando o Tailwind Fill, podemos definir a cor de um SVG.
Este utilitário é frequentemente usado para criar ícones ou logotipos SVG coloridos.
No CSS tradicional, usamos a propriedade fill para conseguir isso.
Essa classe aceita vários valores no Tailwind CSS, onde todas as propriedades são cobertas no formulário de classe.
Sintaxe
<svg class="fill-current">....</svg>
Classes de preenchimento de vento de cauda
| Aulas | Visão geral |
| preencher-nenhum | Nesse caso, os elementos SVG não têm cor de preenchimento. Um ícone SVG com fundo transparente geralmente é criado com essa classe. |
| preencher-herdar | O elemento herdará a cor de preenchimento de seu elemento pai. |
| preenchimento de corrente | Essa classe é usada para definir a propriedade de preenchimento de um elemento SVG para a cor do texto atual, o que significa que o elemento terá a mesma cor de preenchimento do texto ao redor. |
| preenchimento transparente | A propriedade de preenchimento de um elemento SVG é definida como transparente usando esta classe. |
| preenchimento preto | Como resultado, o ícone SVG resultante é preto. |
| preenchimento branco | Usando esta classe, o ícone SVG é definido para a cor branca. |
| preencher-slate-50 | O objetivo desta classe é atribuir a cor azul acinzentada a um arquivo SVG. |
| fill-gray-50 | Esta classe é utilizada para atribuir uma cor cinza a um SVG. |
| fill-zinc-50 | O ícone SVG resultante usa a cor verde acinzentado. |
| preenchimento-neutro-50 | O SVG resultante é de cor neutra acinzentada. |
| fill-stone-50 | Como resultado dessa classe, o SVG é marrom acinzentado. |
| preenchimento-vermelho-50 | Os ícones SVG que usam esta classe são de cor vermelha. |
| preenchimento-laranja-50 | A cor laranja é usada para o ícone SVG. |
| preenchimento-âmbar-50 | A cor SVG é definida como âmbar usando esta classe. |
| preenchimento-amarelo-50 | Esta classe é utilizada para aplicar a cor amarela aos ícones SVG. |
| fill-lime-50 | O objetivo desta classe é definir a cor de um SVG para cal. |
| preenchimento-verde-50 | A propriedade de preenchimento de um SVG é definida como verde usando esta classe. |
| preenchimento-esmeralda-50 | Ele define a cor SVG para um tom de verde. |
| fill-teal-50 | Nesse caso, os ícones SVG são de cor verde-azulada. |
| preenchimento-ciano-50 | Esta classe é usada para definir a cor do ícone SVG para ciano. |
| fill-sky-50 | Ele define a cor SVG para um tom de azul. |
| preenchimento-azul-50 | A cor azul é usada para exibir o ícone SVG. |
| fill-indigo-50 | A cor do SVG resultante é definida como índigo |
| preenchimento-violeta-50 | Os ícones SVG são representados usando a cor violeta. |
| preenchimento-roxo-50 | Esta classe é utilizada para definir a cor SVG para roxo. |
| fill-fucsia-50 | A cor roxo-rosada é usada para exibir o ícone SVG. |
| preenchimento-rosa-50 | A cor rosa é selecionada para a representação de um ícone SVG. |
| preenchimento-rosa-50 | O objetivo desta classe é definir a cor de um SVG para rosa. |
Observação : os valores de cores variam de 50 a 900, com incrementos de 100 após 100.
No exemplo a seguir, o preenchimento Tailwind é demonstrado usando as classes fill- blue , fill- current e fill- rose :
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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-medium my-2"Fill Class in Tailwind CSS
class="bg-gray-200 m-4 grid grid-flow-col gap-4 p-5 rounded-md"
height="150px" width="500px" xmlns="http://www.mrexamples.com/2000/svg" version="1.1"
class="fill-blue-600" cx="100" cy="100" r="40"
class="fill-current text-green-600" cx="250" cy="100" r="40"
class="fill-rose-400" cx="400" cy="100" r="40"
O exemplo a seguir utiliza as classes fill- teal , fill- stone e fill- emerald no preenchimento Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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-medium my-2"Fill Class in Tailwind CSS
class="bg-gray-200 m-4 grid grid-flow-col gap-4 p-5 rounded-md"
height="150px" width="500px" xmlns="http://www.mrexamples.com/2000/svg" version="1.1"
class="fill-teal-600" cx="100" cy="100" r="40"
class="fill-stone-500" cx="250" cy="100" r="40"
class="fill-emerald-400" cx="400" cy="100" r="40"
Vamos explorar o preenchimento Tailwind usando fill- orange , fill- amber e fill- yellow através de um exemplo:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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-medium my-2"Fill Class in Tailwind CSS
class="bg-gray-200 m-4 grid grid-flow-col gap-4 p-5 rounded-md"
height="150px" width="500px" xmlns="http://www.mrexamples.com/2000/svg" version="1.1"
class="fill-orange-600" cx="100" cy="100" r="40"
class="fill-amber-500" cx="250" cy="100" r="40"
class="fill-yellow-400" cx="400" cy="100" r="40"
Nós valorizamos o seu feedback.
+1
1
+1
1
+1
+1
+1
+1
+1
