Este post ilustra todos os aspectos possíveis para adicionar “estilos base” no Tailwind CSS.
Como adicionar estilos “base” no Tailwind?
O “Tailwind CSS” vem com os três métodos a seguir para adicionar os estilos “base” em todo o conteúdo HTML ou em um elemento específico:
- Use “CSS” para adicionar estilos básicos no Tailwind.
- Use “Plugin” para adicionar estilos básicos no Tailwind.
Vamos explorá-los um por um.
Pré-requisitos
Antes de passar para a implementação prática, primeiro dê uma olhada no projeto recém-criado chamado “Linuxhint” que é usado para adicionar os “estilos básicos”:
Estrutura de arquivos do projeto
Agora, navegue até o arquivo “index.html” e dê uma olhada em seu código HTML:
< html >< cabeça >
< link href = '/dist/output.css' rele = 'folha de estilo' >
< / cabeça >
< corpo >
< h2 aula = 'sublinhado centro de texto fonte-texto em negrito-rosa-600' > Bem-vindo ao Linuxhint! < / h2 >< br >
< h3 aula = 'fonte central de texto-texto em negrito–laranja-600' > Tutorial: Adicionando estilos base no Tailwind. < / h3 >< br >
< / corpo >
Nas linhas de código acima:
Saída
A saída do código acima é mostrada aqui:
Agora, use o método discutido para personalizar o código HTML acima adicionando os estilos básicos. Vamos começar com o método “CSS” do Tailwind.
Método 1: Use CSS para adicionar “estilos básicos” no Tailwind
O método mais simples e fácil de adicionar um estilo base ao elemento HTML específico é adicioná-los ao arquivo CSS principal do projeto. Vamos realizar esta tarefa de forma prática seguindo os passos indicados.
Passo 1: Abra o arquivo CSS
Primeiro, abra o arquivo CSS principal, ou seja, “ estilo.css ” que contém as camadas “base”, “componentes” e “utilitários” integradas:
Etapa 2: adicionar o CSS
Em seguida, adicione o estilo “base” para os elementos HTML específicos “
” e “” aplicando as classes usando o “ @aplicar ” diretiva na camada “base” com a ajuda do “ @camada ” palavra-chave. As palavras-chave “@layer” adicionam as classes definidas na camada “base” especificada: @camada base {
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
Nas linhas de código acima, o “ Tamanho da fonte ” é aplicada aos elementos “
” e “” para ampliá-los até o tamanho especificado, respectivamente:
Salve (Ctrl + S) o arquivo.
Passo 3: Saída
Agora, execute o código no servidor ativo e veja a saída, conforme a seguir:
Aqui, a saída mostra que a classe Tailwind “Font Size” foi aplicada com sucesso ao elemento especificado na camada base.
Observação : a mesma abordagem é usada para todas as outras classes CSS do Tailwind.
Método 2: Use o plug-in para adicionar “estilos básicos” no Tailwind
Outro método útil para adicionar estilos “base” é escrever um “ plugar ” e use o “ addBase() ”função. Esta função ajuda a cadastrar novas classes no “ base ” diretiva de camada. Esta função é usada no arquivo Tailwind “tailwind.config.js”. Vamos fazer isso de forma prática.
Passo 1: Defina a Função “addBase()”
Primeiro, navegue até o “ tailwind.config.js ” arquivo de configuração e adicione os estilos base do plugin e chame a função “addBase ()”:
Salve o arquivo.
Passo 2: Saída
Por fim, execute o código HTML fornecido e veja a saída:
Como visto, a classe Tailwind “Font Size” definida na função “addBase()” como um objeto JavaScript é aplicada aos elementos HTML especificados.
Conclusão
Estilos Base Tailwind podem ser adicionados facilmente usando o “ CSS ” classes no arquivo CSS principal e as classes “ Plugar ' com o ' addBase() ” no arquivo de configuração. O método “CSS” é considerado o método mais simples, pois define apenas os estilos base na camada “base” e os implementa automaticamente no elemento especificado. Por outro lado, a seção “plugin” do “ tailwind.config.js ” requer a função “addBase()” para definir os estilos base como objetos JavaScript. Este post ilustrou todos os aspectos possíveis para adicionar estilos base no Tailwind CSS.