Como configurar caminhos de modelo no Tailwind CSS

“ CSS do Tailwind ” é uma estrutura CSS versátil e de boa reputação que estiliza o conteúdo HTML com a ajuda de classes CSS integradas e personalizadas. Também é útil personalizar o modelo especificado de acordo com os requisitos do usuário. Todo o processo requer a configuração dos templates onde o usuário irá utilizar o Tailwind CSS. O Tailwind CSS não pode ser aplicado se o usuário não configurar o caminho do modelo. Portanto, a configuração dos caminhos do modelo é um pré-requisito e obrigatório.

Este post demonstra o procedimento para configurar os caminhos do modelo no Tailwind CSS.

Como configurar caminhos de modelo no Tailwind CSS?

O ' tailwind.config.js ” é usado para configurar os caminhos do modelo nos quais o usuário deseja incorporar o Tailwind CSS. Não está presente por padrão, mas pode ser criado no projeto usando o gerenciador de pacotes “npm”.

Esta seção realiza algumas etapas essenciais para configurar os caminhos do modelo no arquivo “tailwind.config.js”.

Observação : Para implementar “Tailwind CSS”, primeiro instale o “ Node.js ” aplicativo em seu sistema através do link fornecido “ https://nodejs.org/en ” para executar os comandos.

Passo 1: Instale o “TailwindCSS”
Primeiro, crie um novo projeto chamado “Project1” e abra-o no editor de código. Agora, abra o novo terminal e instale o “Tailwind CSS” com a ajuda do seguinte comando:

npm install -D tailwindcss

No comando acima, “ npm ” é o gerenciador de pacotes do nó que instala o “TailwindCSS”, da seguinte forma:

Aqui, a saída mostra que o “Tailwind CSS” e seus pacotes foram baixados com sucesso.

Etapa 2: criar o arquivo de configuração do Tailwind
Em seguida, crie o arquivo de configuração Tailwind CSS “ tailwind.config.js ” para estender sua funcionalidade, como especificar os caminhos do modelo HTML, classes definidas pelo usuário e muitos outros usando este comando:

npx tailwindcss init

A saída mostra que o arquivo de configuração especificado foi criado. Agora, dê uma olhada no “ tailwind.config.js ' arquivo:

Etapa 3: adicionar as diretivas Tailwind ao arquivo CSS principal
Agora, para adicionar funcionalidades especiais ao projeto Tailwind criado, adicione as três diretivas pré-existentes a seguir no arquivo principal “ estilo.css ' arquivo:

base @tailwind;
componentes @tailwind;
utilitários @tailwind;

No bloco de código acima:

base : é a primeira camada do “Tailwind CSS” que modifica o estilo da página da Web por padrão, como cor de fundo, cor do texto ou família de fontes.
componentes : Esta segunda camada está disponível dentro da classe “container” que adiciona a largura de acordo com o tamanho do navegador. Em sua seção, o usuário pode adicionar seus próprios componentes externos criados.
Serviços de utilidade pública : é a terceira camada que soma quase todas as classes de estilo, como sombras, cores, adição, flex e muitas outras classes.

Estas diretivas podem ser vistas na seguinte janela:

Passo 4: Crie o CSS
Agora, crie o CSS usando a ferramenta Tailwind CLI executando o seguinte comando. Ele verificará todos os arquivos de modelo e criará o CSS no “ dist/output.css ' arquivo:

npx tailwindcss -i . / estilo .css -o . / dist. / output.css --watch

Pode-se observar que o comando acima é executado com sucesso. Agora, a estrutura do arquivo do “project1” fica assim:

Etapa 5: criar um modelo HTML e configurar seu caminho
Crie o template HTML no qual o usuário deseja embutir o “Tailwind CSS” e depois configure seu caminho no “ tailwind.config.js ”. Vamos primeiro dar uma olhada no seguinte modelo HTML “ index.html ”:

< cabeça >
< link href = '/dist/output.css' rele = 'folha de estilo' >
< / cabeça >
< corpo >
< h2 aula = 'fonte central de texto-texto em negrito-branco bg-laranja-500' >Bem-vindo ao Linuxhint!< / h2 >< br >
< h3 aula = 'texto-center font-bold text-blue-600 bg-pink-400' >Primeiro Tutorial: Tailwind CSS Framework.< / h3 >< br >
< p aula = 'texto-centro texto-verde-500' >Tailwind CSS é uma estrutura CSS bem conhecida que ajuda a definir as classes CSS predefinidas para estilo seus elementos HTML.< / p >
< / corpo >

Nas linhas de código acima:

A seção “cabeça” usa o “ ” tag para vincular o arquivo CSS criado/compilado “ /dist/output.css ” com o arquivo HTML existente “ index.html ”.
A seção “corpo” primeiro especifica o “
” tag que define o primeiro subtítulo usando a classe Tailwind “ Alinhamento de texto ” para ajustar seu alinhamento no “centro”, “ Espessura da fonte ” para “negrito” o texto, “ Cor do texto ” para adicionar a cor especificada e o “ Cor de fundo ” para aplicar a cor de fundo fornecida, respectivamente.
A seguir, o “
' e a '
” também usam as classes Tailwind discutidas acima para estilizar seu conteúdo.

Configurar Caminho do Modelo HTML
Em seguida, abra o “ tailwind.config.js ” e adicione os links ou caminho na seção “conteúdo” do arquivo de modelo HTML, ou seja, “index.html”:

contente : [ './index.html' ]

Imprensa ' Ctrl+S ” para salvar as novas alterações.

Etapa 6: execute o código HTML
Por fim, execute o código HTML “index.html” no servidor ativo e veja sua saída:

Saída

Como visto, a saída mostra o conteúdo HTML estilizado com a ajuda do Tailwind CSS.

Conclusão

Tailwind CSS usa o “ tailwind.config.js ” arquivo de configuração para configurar os caminhos de modelo HTML criados. Ele especifica o “ contente ” seção que inclui o caminho exato de todos os modelos HTML, arquivos de origem contendo nomes de classe Tailwind e os componentes JavaScript. Ele verifica o arquivo HTML especificado e implementa Tailwind CSS em seu conteúdo. Esta postagem ilustrou o procedimento completo para configurar caminhos de modelo no Tailwind CSS.

Como configurar caminhos de modelo no Tailwind CSS