Cor do Espaço Reservado do Tailwind
Este artigo discute como usar o recurso de cores de espaço reservado do Tailwind e como criar cores de espaço reservado eficazes com exemplos .
As cores de espaço reservado são as cores usadas nos campos de entrada antes que o usuário digite qualquer coisa.
Ele permite que você altere a cor padrão do texto do espaço reservado para uma cor personalizada .
Eles são um elemento sutil, mas importante, do design da web que pode aprimorar a experiência do usuário e tornar seu site mais atraente visualmente.
Índice-
Cores de espaço reservado do Tailwind?
As cores do Tailwind Placeholder são as cores usadas para representar o texto nos campos de entrada antes que o usuário digite qualquer coisa.
Frequentemente usado em formulários para indicar que tipo de informação deve ser inserida em cada campo.
As cores do espaço reservado geralmente são cinza claro ou uma cor neutra semelhante, o que ajuda a diferenciá-las do texto inserido pelo usuário.
Classes de cores de espaço reservado do Tailwind
O Tailwind facilita a definição de cores de espaço reservado usando suas classes internas.
| Aulas | Visão geral |
| espaço reservado-transparente | Essa classe é usada para definir a cor do texto do espaço reservado de um elemento de entrada para ser transparente. |
| espaço reservado-atual | Usado para definir a cor do texto do espaço reservado para a cor atual do texto. |
| espaço reservado-preto | Nesse caso, a cor do texto do espaço reservado é preta. |
| espaço reservado-branco | A cor do texto do espaço reservado é definida como branco. |
| espaço reservado-cinza-50 | A cor do texto do espaço reservado é definida como um tom de cinza. |
| espaço reservado-vermelho-50 | Usando esta classe, a cor do texto do espaço reservado é especificada como um tom de vermelho. |
| espaço reservado-azul-50 | Um tom de azul é usado como texto de espaço reservado. |
| espaço reservado-indigo-50 | A cor do texto do espaço reservado é um tom de índigo. |
| espaço reservado-roxo-50 | Usando esta classe, a cor do texto do espaço reservado é definida como um tom de roxo. |
| espaço reservado-verde-50 | Nesse caso, a cor do texto do espaço reservado é definida como um tom de verde. |
| espaço reservado-amarelo-50 | A cor do texto do espaço reservado é definida como um tom de amarelo. |
| espaço reservado-rosa-50 | Um tom de rosa é usado como a cor do texto do espaço reservado. |
| espaço reservado-slate-50 | Esta classe define a cor do texto do espaço reservado para um tom de ardósia. |
| espaço reservado-cinza-50 | Ao usar esta classe, a cor do texto do espaço reservado será um tom de cinza. |
| espaço reservado-neutro-50 | Nesse caso, a cor do texto do espaço reservado é definida como um tom neutro. |
| espaço reservado-zinco-50 | Usando esta classe, a cor do texto do espaço reservado é definida como um tom de zinco. |
| espaço reservado-pedra-50 | Usado para definir a cor do texto do espaço reservado para um tom de pedra. |
| espaço reservado-laranja-50 | Um tom de laranja é usado como a cor do texto do espaço reservado. |
| espaço reservado-âmbar-50 | Esta classe aplica uma cor de texto de espaço reservado de âmbar. |
| espaço reservado-limão-50 | Um tom de limão é usado como a cor do texto do espaço reservado. |
| espaço reservado-esmeralda-50 | Aplica um tom de esmeralda como a cor do texto do espaço reservado. |
| espaço reservado-teal-50 | A cor do texto do espaço reservado é definida como um tom de azul-petróleo. |
| espaço reservado-ciano-50 | A cor do texto do espaço reservado é definida como um tom de ciano. |
| espaço reservado-céu-50 | Usando esta classe, a cor do texto do espaço reservado é especificada como um tom do céu. |
| espaço reservado-violeta-50 | Ao usar essa classe, a cor do texto do espaço reservado é definida como um tom de violeta. |
| espaço reservado-fúcsia-50 | Essa classe garante que a cor do texto do espaço reservado seja definida como um tom fúcsia. |
| espaço reservado-rosa-50 | Um tom de rosa é definido como a cor do texto do espaço reservado. |
Obs : Os valores das cores podem ser alterados conforme sua necessidade de 50.100-900. O incremento deve ser 100, após 100.
Por que usar as cores de espaço reservado do Tailwind?
As cores do Tailwind Placeholder servem a vários propósitos.
- Ele fornece dicas visuais aos usuários sobre quais informações devem inserir em cada campo. Isso pode ajudar a reduzir erros e tornar mais fácil para os visitantes preencher formulários com rapidez e precisão.
- As cores de espaço reservado do Tailwind podem aprimorar o apelo visual do seu site. Ao escolher uma cor que complemente o esquema de cores do seu site, você pode criar um design mais coeso e atraente.
- Pode ser usado para indicar campos obrigatórios. Ao tornar o marcador de posição vermelho, por exemplo, você pode informar aos usuários que eles devem preencher esse campo antes de enviar o formulário.
Sintaxe
<element class="placeholder-{color}">...</element>
O exemplo a seguir ilustra o uso de algumas classes de cores de espaço reservado no 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="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-semibold"Placeholder Color class in Tailwind
class="grid grid-cols-2 gap-2 font-medium mt-4"
class="placeholder-gray-500 border-2 p-2" placeholder="placeholder-gray-500"
class="placeholder-slate-500 border-2 p-2" placeholder="placeholder-slate-500"
class="placeholder-rose-600 border-2 p-2" placeholder="placeholder-rose-600"
class="placeholder-red-600 border-2 p-2" placeholder="placeholder-red-600"
class="placeholder-yellow-600 border-2 p-2" placeholder="placeholder-yellow-600"
class="placeholder-purple-600 border-2 p-2" placeholder="placeholder-purple-600"
O exemplo abaixo demonstra o utilitário de cor de espaço reservado no Tailwind usando algumas de suas classes:
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="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="my-2 font-semibold"Placeholder Color class in Tailwind
class="grid grid-cols-2 gap-2 font-medium mt-4"
class="placeholder-pink-500 border-2 p-2" placeholder="placeholder-pink-500"
class="placeholder-stone-500 border-2 p-2" placeholder="placeholder-stone-500"
class="placeholder-green-600 border-2 p-2" placeholder="placeholder-green-600"
class="placeholder-indigo-600 border-2 p-2" placeholder="placeholder-indigo-600"
class="placeholder-sky-600 border-2 p-2" placeholder="placeholder-sky-600"
class="placeholder-orange-600 border-2 p-2" placeholder="placeholder-orange-600"
Dicas para cores de espaço reservado do Tailwind
Ao escolher a cor do espaço reservado do Tailwind, há vários fatores a serem considerados.
Aqui estão algumas dicas para ajudá-lo a criar cores de espaço reservado eficazes:
- Escolha uma cor que complemente o esquema de cores do seu site . Isso ajudará a criar um design coeso.
- Considere a legibilidade do texto. Evite cores muito claras ou muito escuras, pois isso pode dificultar a leitura do texto.
- Use cores para indicar os campos obrigatórios. Ao tornar o marcador de posição vermelho ou outra cor chamativa, você pode informar aos usuários quais campos devem preencher.
- Experimente a opacidade. Ajustar a opacidade da cor do espaço reservado pode criar um efeito sutil, mas visualmente atraente.
- Teste suas cores em diferentes dispositivos e tamanhos de tela. Certifique-se de que suas cores sejam legíveis e visualmente atraentes em todos os tipos de dispositivos.
Nós valorizamos o seu feedback.
+1
1
+1
+1
+1
+1
+1
+1
