Guia de introdução ao Tailwind CSS: domine a estrutura de estilo prática e prioritária do zero.

O que é Tailwind CSS?

Tailwind CSS é um framework CSS focado na funcionalidade, destinado a criar rapidamente interfaces de utilizador personalizadas. Ao contrário dos frameworks tradicionais, como o Bootstrap e o Bulma, que fornecem componentes pré-fabricados, o Tailwind oferece classes CSS de baixo nível e de função única. Estas classes podem ser combinadas, como peças de um puzzle, para criar qualquer design sem sair do ficheiro HTML. A sua filosofia central é “funcionalidade em primeiro lugar”, com o objetivo de fornecer um conjunto completo de blocos de construção combináveis, permitindo que os programadores criem designs precisos de forma mais eficiente, mantendo o tamanho do pacote CSS ao mínimo.

O seu funcionamento baseia-se num sistema de design configurável. Você faz isso através de um programa chamado tailwind.config.js Os ficheiros de configuração permitem definir a paleta de cores, as fontes, os espaçamentos, os pontos de interrupção e outros parâmetros de design do projeto. Durante o desenvolvimento, pode utilizar todas as classes fornecidas pelo framework; na fase de compilação para produção, o Tailwind utiliza um motor chamado “PurgeCSS” (integrado na versão v3 e superiores) para analisar os ficheiros do projeto e remover, de forma inteligente, todos os estilos não utilizados, gerando, em última análise, um ficheiro CSS extremamente compacto.

Configuração do ambiente e configuração básica

Para começar a utilizar o Tailwind CSS, primeiro precisa de o integrar no seu projeto. A forma mais comum de o fazer é instalá-lo através do Node.js e do npm (ou do yarn).

Leitura recomendada Do iniciante ao especialista: um guia completo para dominar o Tailwind CSS e melhorar a eficiência do desenvolvimento front-end.。

Instalar através do PostCSS

Esta é a forma mais utilizada e recomendada, uma vez que se integra de forma perfeita com a maioria das ferramentas de construção (como Vite e Webpack). Primeiro, instale o Tailwind e as suas dependências através do npm.

Assistente do construtor de sites WordPress.com

Disponibilidade de 99,999% + recuperação de desastres entre regiões, suporte 24 horas por dia, 7 dias por semana, site de criação de IA gratuito com a compra do pacote de blog

Nome de domínio gratuito por um ano

Visite o Assistente do construtor de sites do WordPress.com →

Assistente do construtor de sites UltaHost

Mais de 900 modelos gratuitos e personalizáveis para obter o poder de SEO de que você precisa para otimizar seu site para exposição em pesquisas

Oferta 40%

Visite o UltaHost Website Builder Helper →

npm install -D tailwindcss postcss autoprefixer

Em seguida, inicialize o ficheiro de configuração do Tailwind CSS. A execução do seguinte comando irá gerar um ficheiro por defeito. tailwind.config.js Documentos.

npx tailwindcss init

Em seguida, você precisa criar um arquivo de configuração do PostCSS (geralmente chamado de postcss.config.jsEm seguida, clique em "Adicionar novo" e adicione o Tailwind CSS e o Autoprefixer à lista de plugins.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Por último, no seu ficheiro CSS principal (por exemplo, src/styles.css ou input.cssNeste artigo, usamos @tailwind Instruções para injetar os estilos básicos, classes de componentes e classes de ferramentas do Tailwind.

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

A personalização do perfil

O gerado tailwind.config.js O ficheiro é o centro de controlo do seu sistema de design. Aqui, pode expandir ou substituir o tema predefinido. Por exemplo, adicionar cores da marca ou espaçamentos personalizados.

Leitura recomendada Uma compreensão profunda do Tailwind CSS: um guia de construção de estilos desde os princípios até a prática.。

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
  plugins: [],
}

tomar nota de content O campo é crucial, pois indica ao Tailwind quais ficheiros devem ser analisados para encontrar os nomes das classes utilizadas, de modo a otimizá-los no ambiente de produção.

Os principais tipos de utilidade e os padrões de utilização.

O núcleo do Tailwind é um conjunto extenso de classes úteis com nomes padronizados, que abrangem todos os atributos CSS, incluindo layout, espaçamento, tipografia, cores, bordas e efeitos.

Controlo de layout e espaçamento

O Tailwind utiliza uma escala de espaçamento previsível baseada em rem. Os nomes das classes são, por exemplo, p-4(padding: 1rem)m-2(margem: 0.5rem),mt-8(margin-top: 2rem) etc. Classe de layout, como flex, grid, block, hidden etc., permitindo-lhe construir a estrutura rapidamente.

Construtor de sites da Bluehost

Oferece ferramenta de criação de sites com IA, suporte por telefone e chat ao vivo 24 horas por dia, 7 dias por semana, nome de domínio gratuito por 1 ano, CDN gratuito, SLA de tempo de atividade de 99,99%

Visite a Bluehost

<div class="flex justify-between items-center p-6 bg-gray-100">
  <div class="text-lg font-bold">logotipo</div>
  <nav class="space-x-4">
    <a href="#" class="text-gray-700 hover:text-brand-blue">Página inicial</a>
    <a href="#" class="text-gray-700 hover:text-brand-blue">Sobre</a>
  </nav>
</div>

Design responsivo e estado de interação

O Tailwind utiliza um sistema de pontos de interrupção prioritário para dispositivos móveis. Os pontos de interrupção por defeito são os seguintes: sm:(640px),md:(768px)lg:(1024px)xl:(1280px),2xl:(1536px). É possível criar layouts responsivos com facilidade, adicionando um prefixo de ponto de interrupção antes do nome da classe.

O estado de interação é alcançado através de modificadores de variante, tais como hover:, focus:, active:, disabled:Você pode combiná-los com qualquer classe utilitária.

<button class="bg-brand-blue text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 active:scale-95 transition duration-150">
  点击我
</button>

Dicas avançadas e melhores práticas

À medida que o tamanho do projeto aumenta, dominar algumas técnicas avançadas pode ajudá-lo a escrever código mais eficiente e fácil de manter.

Leitura recomendada Domine o Tailwind CSS: um guia prático do início ao fim sobre o framework de estilos front-end.。

Extrair componentes e reutilizar estilos.

Apesar de a Tailwind recomendar a combinação de nomes de classes diretamente no HTML, escrever repetidamente uma longa lista de nomes de classes pode reduzir a manutenibilidade, especialmente no caso de combinações de estilos complexas que surgem com frequência nos projetos. Nestes casos, existem várias soluções.

A primeira é usar @apply Instruções. Pode extrair um conjunto de classes Tailwind para uma nova classe CSS num ficheiro CSS personalizado.

hosting.com

SSL gratuito, Cloudflare CDN, WAF, mais de 40 salas de servidores globais para escolher, menor latência perto de você, suporte de serviço 24/7/365, agora você pode economizar até 67%, suporte para compilações de IA e otimização de SEO!

Visite hosting.com

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-3 px-6 bg-brand-blue text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200;
  }
  .card {
    @apply bg-white rounded-xl shadow-lg p-6 border border-gray-200;
  }
}

Em seguida, no HTML, pode-se utilizar um código simples. class=“btn-primary” e class=“card”。

A segunda abordagem consiste em, numa estrutura baseada em componentes (como o React ou o Vue), encapsular os estilos repetidos num componente de interface do utilizador reutilizável, o que está mais de acordo com as melhores práticas de desenvolvimento front-end moderno.

Variedades personalizadas e desenvolvimento de plugins.

A capacidade de configuração do Tailwind é muito poderosa. Você pode adicionar novas utilidades por meio de plugins ou adicionar variantes para utilidades personalizadas. Por exemplo, você pode criar um plugin para adicionar o “Modo Escuro”. dark: Suporte a variantes (na verdade, já integrado desde a versão v2), ou adicione para o “primeiro elemento filho”. first: Variante.

Uma utilização mais avançada consiste em criar os seus próprios plugins para gerar as ferramentas específicas necessárias ao projeto. Isso geralmente envolve a manipulação da árvore de sintaxe abstrata (AST) do PostCSS, sendo adequado para equipas com necessidades específicas.

resumos

O Tailwind CSS trouxe uma mudança de paradigma no desenvolvimento front-end com a sua abordagem única de “pragmatismo em primeiro lugar”. Ao fornecer um conjunto completo e configurável de utilitários de baixo nível, ele transfere as decisões de design das folhas de estilo para a linguagem de marcação, aumentando significativamente a flexibilidade e a velocidade do desenvolvimento de UI. O seu mecanismo inteligente de otimização “Shake Tree” garante que o arquivo CSS final seja extremamente compacto, resolvendo perfeitamente o problema dos frameworks de CSS tradicionais, que são muito volumosos. Apesar de, no início, ser necessário memorizar um grande número de nomes de classes, uma vez que se familiarize com a sua lógica de nomenclatura e a combine com os padrões modernos de desenvolvimento de componentes, o Tailwind CSS tornar-se-á uma ferramenta poderosa para criar aplicações web modernas, de alto desempenho e altamente personalizáveis.

Perguntas frequentes Perguntas frequentes

O Tailwind CSS é adequado para grandes projetos? Isso pode levar a uma confusão nos nomes das classes HTML?

Tailwind CSS é perfeito para grandes projetos. As preocupações com nomes de classes confusos são comuns, mas podem ser gerenciadas eficazmente com prática e padrões. Em grandes projetos, as melhores práticas são: 1) combinar uma estrutura de componentes (como React, Vue, Svelte) para encapsular os estilos com a lógica dos componentes, de modo que as longas listas de nomes de classes fiquem restritas aos modelos dos componentes e não contaminem o código global; 2) usar amp; para incluir CSS externo em vez de inseri-lo diretamente no código JavaScript. @apply Extrair padrões de estilo altamente repetitivos e complexos, formando classes de componentes semânticos. 3) Utilizar ferramentas (como o plug-in Tailwind CSS do Prettier) para ordenar e formatar automaticamente os nomes das classes, mantendo a consistência. Muitas grandes empresas (como GitHub e Netflix) já utilizaram com sucesso esta ferramenta em ambientes de produção.

Como coexistir com a biblioteca de código CSS ou Sass existente?

O Tailwind CSS pode ser introduzido gradualmente em projetos existentes. Pode introduzir o Tailwind e o seu CSS original na mesma folha de estilos global. É necessário ter em atenção a especificidade do CSS. As classes do Tailwind têm uma especificidade baixa (seletores de classe únicos), por isso, podem ser facilmente sobrepostas por seletores de maior especificidade do seu código original.

Uma estratégia para uma transição suave é: primeiro, usar o Tailwind nas novas funcionalidades ou componentes do projeto. Depois, durante a reformulação dos componentes antigos, substituir gradualmente os CSS originais por classes Tailwind. Você pode até usar o CSS personalizado. @apply Utilize as classes de ferramentas do Tailwind e os seus estilos antigos em conjunto, como uma transição.

Quais são as diferenças entre o Tailwind CSS v2, v3 e o modo JIT?

O Tailwind CSS v2 é a primeira versão estável, que introduz funcionalidades como o modo escuro e uma nova paleta de cores, mas o seu motor principal (designado por “AOT”, ou seja, compilação antecipada) necessita de gerar todos os possíveis tipos de classes com antecedência.

O v2.1 introduziu o modo “JIT” (compilação just-in-time) como uma funcionalidade experimental. O motor JIT gera estilos conforme necessário, em vez de gerar todo o conjunto de estilos previamente. Isto traz grandes vantagens: a construção do desenvolvimento é muito mais rápida e suporta valores arbitrários (como <). top-[117px]), suportando todas as variantes e a combinação com qualquer classe.

O Tailwind CSS v3 é totalmente baseado no motor JIT e é ativado por padrão. Portanto, no v3, você não precisa configurar o modo JIT, pois ele fornece todos os benefícios do JIT: compilação mais rápida, valores arbitrários e variantes mais flexíveis. Portanto, para novos projetos, você deve usar diretamente o v3 ou versões posteriores.

Como resolver o problema de inconsistência na ordenação dos nomes das classes dentro de uma equipa?

A inconsistência na ordenação dos nomes de classes pode afetar a legibilidade do código e a clareza do controle de versão. A forma mais eficaz de resolver este problema é utilizar ferramentas automatizadas. Recomenda-se o utilização do formatador de código Prettier e a instalação do plugin oficial. prettier-plugin-tailwindcss Plug-ins.

Após a instalação e configuração, o Prettier ordena automaticamente os nomes das classes de acordo com uma ordem recomendada (geralmente: layout -> espaçamento -> tipografia -> visual -> outros). Isto garante que todos os membros da equipa produzem nomes de classes na mesma ordem, sem necessidade de manter as regras manualmente. Isto melhora significativamente a legibilidade e a manutenibilidade do código.