Este artigo explicará:
- O que telas, cores e espaçamento fazem no Tema Tailwind?
- Como usar telas, cores e espaçamento no tema Tailwind?
- Como configurar telas, cores e espaçamento no tema Tailwind?
O que telas, cores e espaçamento fazem no Tema Tailwind?
O telas key permite que os usuários modifiquem os pontos de interrupção responsivos no projeto Tailwind. Breakpoints são os pontos onde o layout muda com base na largura da tela. Por padrão, o Tailwind inclui cinco telas, ou seja, sm (pequeno), md (médio), lg (grande) e xl (extra grande). No entanto, os usuários podem definir seus pontos de interrupção usando a tecla “telas” e, em seguida, usá-los no programa HTML.
cores chave é utilizada para modificar a paleta de cores. As cores são uma das características mais importantes do design. O tema Tailwind fornece uma paleta de cores padrão com uma ampla variedade de tons, mas os usuários também podem personalizá-lo ou estendê-lo com suas cores. Os usuários podem definir cores usando a chave “cores” e, em seguida, usá-las com qualquer classe de utilitário relacionada a cores no código HTML.
O espaçamento tecla é utilizada para modificar o espaçamento e a escala de dimensionamento. O espaçamento é outro aspecto essencial do design, pois afeta a legibilidade, o alinhamento e o equilíbrio dos elementos. O tema Tailwind fornece uma escala de espaçamento consistente com base em um valor base de 4 pixels (0,25 rem). No entanto, também pode ser personalizado ou estendido com valores personalizados. Os usuários podem definir valores de espaçamento usando a tecla “spacing” e, em seguida, usá-los com qualquer classe de utilitário relacionada a espaçamento no arquivo do programa.
Como usar telas, cores e espaçamento no tema Tailwind?
Para usar telas, cores e espaçamento no tema Tailwind, crie um programa HTML e use as propriedades padrão de tela, cores e espaçamento conforme necessário. Em seguida, execute o programa HTML e exiba a página da Web em HTML. Vamos seguir os passos abaixo mencionados:
Etapa 1: criar página da Web em HTML
Primeiro, crie um programa HTML e utilize as propriedades padrão de tela, cores e espaçamento:
= 'texto-3xl m-5 sm:texto-branco texto-centro' >
Dica do Linux!
>
= 'text-2xl m-5 md:text-white text-center' >
Bem-vindo a este Tutorial
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS do Tailwind
>
Bem-vindo a este Tutorial
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS do Tailwind
>
= 'text-2xl m-5 xl:text-white text-center' >
Temas
>
>
>
Aqui:
- “ -p-10 ' e ' m-5 ” são a propriedade de espaçamento.
- “ sm ”, “ md ”, “ lg ', e ' xl ” são as propriedades da tela.
- “ vermelho-700 ”, “ azul-600 ”, “ verde-500 ”, “ rosa-700 ', e ' branco ” são as propriedades da cor.
Etapa 2: execute o programa HTML
Em seguida, execute o programa HTML para visualizar a página da Web em HTML:
Na saída acima, as telas, cores e propriedades de espaçamento padrão podem ser vistas.
Como configurar telas, cores e espaçamento no tema Tailwind?
Para configurar telas, cores e espaçamento no tema Tailwind, observe as etapas fornecidas:
- Abra o ' tailwind.config.js ' arquivo.
- Vou ao ' tema ” e personalize as telas, cores e propriedades de espaçamento conforme necessário.
- Use as propriedades customizadas no programa HTML.
- Visualize a página da Web em HTML para verificação.
Etapa 1: configurar telas, cores e espaçamento no arquivo de configuração do Tailwind
No ' tema ” seção do “ tailwind.config.js ” , personalize as telas, cores e propriedades de espaçamento de acordo com a necessidade. Por exemplo, personalizamos essas propriedades da seguinte maneira:
módulo .exportações = {contente : [ './index.html' ] ,
tema : {
//personalizando as telas
telas : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//personalizando as cores
cores : {
branco : #ffffff ,
preto : '#000000' ,
azul : '#08609c' ,
verde : '#089c28' ,
vermelho : '#9c0306' ,
amarelo : '#ede60e' ,
rosa : '#ed0e55' ,
} ,
// customizando o espaçamento
espaçamento : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25rem' ,
'2' : '0,5rem' ,
'3' : '0,75rem' ,
'4' : '1 coisa' ,
'5' : '1,25rem' ,
'6' : '1,5rem' ,
'8' : '2rem' ,
'10' : '2,5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'vinte' : '5rem' ,
}
} ,
} ;
Neste código:
- O ' telas ” define pontos de interrupção de tela para tamanhos variados. Ele fornece aliases (como sm, md, lg, xl) e seus valores equivalentes.
- O ' cores ” define cores personalizadas usando seus nomes e pares de valores hexadecimais.
- O ' espaçamento ” especifica valores de espaçamento personalizados para vários tamanhos. Ele usa aliases (como px, 0, 1, 2, etc.) para representar valores de espaçamento específicos em unidades “rem”.
Passo 2: Use Propriedades Configuradas no Programa HTML
Agora, utilize as propriedades personalizadas no programa HTML:
= 'texto-3xl m-5 sm:texto-branco texto-centro' >
Dica do Linux!
>
= 'text-2xl m-5 md:text-white text-center' >
Bem-vindo a este Tutorial
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS do Tailwind
>
Bem-vindo a este Tutorial
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS do Tailwind
>
= 'text-2xl m-5 xl:text-white text-center' >
Temas
>
>
>
Etapa 3: Exibir página da Web em HTML
Por fim, verifique a saída visualizando a página da Web em HTML:
Pode-se observar que o conteúdo da página web muda de acordo com as telas configuradas, cores e propriedades de espaçamento.
Conclusão
O telas permite que os usuários personalizem/modifiquem os pontos de interrupção responsivos, o cores chave é usada para personalizar a paleta de cores para o projeto e o espaçamento A tecla é utilizada para personalizar o espaçamento e a escala de dimensionamento. Além disso, os usuários podem personalizar essas chaves ou propriedades de acordo com suas necessidades. Este artigo explicou telas, cores e espaçamento no tema Tailwind.