Tailwind é o mais comumente usado estrutura que os desenvolvedores preferem devido ao seu flexível e amigo do usuário natureza. É uma estrutura de lençóis em cascata de baixo nível que permite projetar um site mais rápido. Tailwind tem muitas aulas de CSS, onde cada classe tem sua própria funcionalidade que auxilia no rápido desenvolvimento do seu site e tornando -o mais elegante.

Tailwind não tem restrições ao design e estilo de sites. Com a ajuda de Tailwind, a eficiência do seu projeto será aumentada dividindo o componente complexo em pedaços e segmentando -os para alcançar a máxima capacidade de resposta.

Vantagens de usar o Tailwind em CSS

Aqui está a lista de algumas das vantagens de usar o Tailwind no CSS:

• Tailwind CSS é um estrutura altamente personalizável que têm configurações padrão, é fácil substituí -las com um vento de cauda.Config.arquivo js. Este arquivo de configuração permite que você Personalizar facilmente estilo, temas, esquemas de cores e paletas.
• Nesta estrutura, você não precisa usar mais nomes para classes e IDs CSS. Permite que você Combine pequenos componentes De acordo com suas preferências.
• Os arquivos CSS têm linhas mínimas de código.
• O tempo mínimo é obrigatório Para projetar o site.
• Devido ao seu natureza flexível, Você pode fazer alterações de acordo com suas necessidades.

Como instalar CSS do Tailwind

A instalação do Tailwind CSS usando a ferramenta CLI é a maneira mais rápida e simples. Com a ferramenta CLI da Tailwind, você pode facilmente executar os CSs do Tailwind do zero. Para Instale o Tailwind CSS, Siga as etapas dadas:

Etapa 1: Instale o Tailwind CSS

Use o seguinte comando para o instalação de Tailwind através da npm:

> npm install -d caudwindcss

Etapa 2: Crie arquivo de configuração

Em seguida, crie o arquivo de configuração “Tailwind.Config.JS”:

> npx caudwindcss init

Etapa 3: Adicione o caminho aos arquivos do modelo

Depois de criar o arquivo de configuração, adicionar todos caminhos dos seus arquivos de modelo no recém -criado “Tailwind.Config.JS”Arquivo de configuração:

contente: ["./src / * * / *.html, js "],

Etapa 4: Adicione as diretivas CSS do Tailwind no arquivo CSS

Na próxima etapa, você tem que adicionar o Diretivas CSS do Tailwind ““@tailwind”Em Main Arquivo CSS Para todas as camadas de Tailwind após a configuração de todos os caminhos do seu modelo:

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

Etapa 5: Execute a ferramenta CLI do Tailwind

Agora você tem que executar a ferramenta CLI da Tailwind, e ela digitalizará todos os arquivos de modelo e criará o CSS:

NPX Tailwindcss -i. /src/entrada.CSS -O ./dist/saída.CSS -Assista

Etapa 6: vincular o arquivo CSS com HTML

Coloque seu arquivo CSS compilado no “”Tag do seu arquivo HTML:

Agora você pode usar as classes utilitárias de Tailwind no seu arquivo HTML para estilizar seu conteúdo:

Saída

Todas as informações essenciais relacionadas ao Tailwind CSS. Você pode explorar ainda mais conforme necessário.

Conclusão

Tailwind CSS é uma estrutura de lençóis em cascata de baixo nível que permite que você projete um site mais rápido. Essa estrutura é altamente personalizável, tem uma natureza flexível e leva tempo mínimo para projetar aplicativos da Web. A estrutura CSS da Tailwind é utilizada principalmente para o desenvolvimento de aplicações de tamanho grande. Este artigo discutiu o que é o Tailwind, suas vantagens e o procedimento para instalar e usar a ferramenta CLI do Tailwind CLI.