Tutorial do Tailwind CSS: o guia prático definitivo, do iniciante ao especialista.

O que é Tailwind CSS?

Tailwind CSS é um framework CSS que prioriza a utilidade, fornecendo uma série de classes CSS de baixo nível e de uso único, que podem ser combinadas diretamente em HTML (ou JSX, modelos Vue, etc.) para criar rapidamente interfaces de utilizador personalizadas. Ao contrário de frameworks como o Bootstrap, que fornecem componentes pré-configurados (como botões e cartões), o Tailwind CSS não fornece nenhum componente pronto a usar, mas oferece um conjunto de ferramentas básicas necessárias para criar qualquer design.

Esta abordagem pragmática significa que os desenvolvedores não precisam mais escrever CSS personalizado para os componentes, nem alternar frequentemente entre os ficheiros HTML e CSS. Ao aplicar diretamente uma série de regras CSS no HTML, text-blue-600、p-4、bg-gray-100 Ao herdar a classe .card, é possível definir a cor do texto, a margem interna e a cor de fundo. Isto aumenta significativamente a eficiência do desenvolvimento e permite uma ligação estreita entre o estilo e a estrutura, reduzindo o tamanho e a complexidade dos ficheiros CSS.

A filosofia de design central do Tailwind CSS é “Restrições que geram liberdade”. Ele garante a consistência do design do projeto, sem perder a flexibilidade, através de um conjunto de restrições cuidadosamente projetadas, que seguem o sistema de design em termos de espaçamento, cores, tamanhos de fonte e outras escalas. Os desenvolvedores podem criar designs exclusivos com base nestas restrições predefinidas, sem se preocuparem com a proliferação descontrolada de estilos.

Como começar a usar o Tailwind CSS?

Existem várias maneiras de integrar o Tailwind CSS no seu projeto. A forma mais recomendada é instalá-lo como um plug-in do PostCSS, o que permite tirar o máximo partido das funcionalidades de otimização do Tailwind.

Instale através do npm ou do yarn.

Primeiro, inicialize o projeto através do gerenciador de pacotes e instale o Tailwind CSS e as suas dependências. O comando principal é instalar. tailwindcss、postcss e autoprefixer。

npm install -D tailwindcss postcss autoprefixer

Após a instalação, execute o seguinte comando para gerar os ficheiros de configuração do Tailwind CSS e do PostCSS. Execute npx tailwindcss init -p Será criado simultaneamente tailwind.config.js e postcss.config.js Documentos.

npx tailwindcss init -p

\nConfigurar o caminho do modelo

Durante a geração de tailwind.config.js No ficheiro, necessita de configurar content Os campos, para informar ao Tailwind quais nomes de classes devem ser analisados nos arquivos. Isso geralmente inclui os seus arquivos HTML, JavaScript, JSX ou Vue. Isto é crucial, pois o Tailwind usa um mecanismo chamado “PurgeCSS” (na versão de produção) para remover todos os CSS não utilizados, gerando arquivos de estilo minimizados.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Instruções de importação de estilo

No seu arquivo CSS principal (por exemplo, src/styles.css ou src/index.cssNeste artigo, usamos @tailwind Instruções para injetar os estilos principais do Tailwind.

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

Em seguida, introduza este ficheiro CSS no ficheiro de entrada do seu projeto. Após concluir estes passos, poderá começar a utilizar as classes úteis do Tailwind no HTML.

As principais classes práticas e os padrões mais comuns

Os nomes das classes do Tailwind CSS são altamente semânticos e previsíveis, seguindo um padrão de nomenclatura simples: propriedade-valor (ou propriedade-ponto de interrupção-valor).

Layout e Espaçamento

Este é o conjunto de classes mais utilizado. Por exemplo,flex Para configurar o layout de caixa flexível,p-4 Expressar padding: 1rem. A utilização de margens m-*, o preenchimento interno é usado p-*Os números geralmente correspondem a um sistema de espaçamento dimensionado proporcionalmente (como 0, 1, 2, 4, 6).

<div class="flex justify-between items-center p-4">
  <div class="ml-2">À esquerda</div>
  <div class="mr-2">\nÀ direita</div>
</div>

Cor e Fundo

Você pode configurar facilmente a cor do texto, a cor do fundo e a cor da borda. O sistema de cores oferece uma paleta rica, como por exemplo, text-blue-500、bg-gray-100、border-red-300Quanto maior o número, geralmente, mais escuro é a cor (por exemplo,blue-100 É muito raso.blue-900 É muito profundo.

design responsivo

O Tailwind adota uma estratégia móvel prioritária. Todas as classes funcionais são destinadas a dispositivos móveis por predefinição. Para adicionar estilos a ecrãs maiores, é necessário acrescentar um prefixo de ponto de interrupção antes do nome da classe, como, por exemplo, md:、lg:Isso torna a criação de interfaces responsivas extremamente simples.

<div class="text-base md:text-lg lg:text-xl">
  Este texto é apresentado em tamanho básico no telemóvel, torna-se maior no tablet e ainda maior no computador.
</div>

Estado de suspensão, foco, etc.

Ao adicionar um prefixo de estado, é possível definir estilos para diferentes estados do elemento. Por exemplo,hover:bg-blue-600 Vai alterar a cor de fundo quando o rato passa por cima dele.focus:ring-2 Um contorno circular será adicionado quando o elemento ganhar o foco.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停有效果的按钮
</button>

Dicas avançadas e configurações personalizadas

Depois de dominar o básico, você pode aproveitar todo o potencial do Tailwind com algumas técnicas avançadas e configurações personalizadas.

Extrair a classe de componente

Apesar de a prioridade prática ser a ideia central, para evitar repetir uma longa lista de classes em HTML, você pode usar @apply A instrução extrai e reutiliza combinações de estilos comuns no CSS, criando os seus próprios “classe de componentes”.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

Depois, basta usar isso em HTML. class="btn-primary" É só isso.

Sistema de Design Personalizado

Todos os valores predefinidos do Tailwind são configuráveis. Através da modificação de tailwind.config.js Os documentos podem ser personalizados com cores, fontes, espaçamento, pontos de interrupção, etc., para que estejam completamente em conformidade com as normas da sua marca ou do seu design.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

Após a definição, você poderá usá-lo. text-brand-blue ou p-84 É assim que funciona uma classe personalizada.

Usar o modo JIT (Just-In-Time)

A partir da versão 2.1 do Tailwind CSS, foi introduzido o motor Just-in-Time (JIT). Este gera dinamicamente o CSS necessário quando você escreve um modelo, em vez de gerar previamente um enorme arquivo CSS que contém todas as classes possíveis. Isso proporciona um grande aumento de desempenho e permite funcionalidades que não seriam possíveis no modo tradicional, como variantes de valores arbitrários.

Para ativar o modo JIT, basta ir para tailwind.config.js Defina no centro mode: 'jit'。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... 其他配置
}

Depois de ativado, você pode até usar coisas como w-[200px] ou top-[-10px] Estes tipos de valores arbitrários proporcionam uma grande flexibilidade ao desenvolvimento.

resumos

O Tailwind CSS revolucionou a forma como os desenvolvedores front-end escrevem estilos, com a sua metodologia única de prioridade prática. Ele move as decisões de estilo dos arquivos CSS para as marcações HTML, permitindo o desenvolvimento de interfaces eficientes, consistentes e altamente personalizáveis, combinando várias classes atômicas de responsabilidade única. Desde a instalação e configuração simples, passando pelas classes centrais de layout, cores, responsividade e estado, até as configurações avançadas de personalização, extração de componentes e modo JIT, o Tailwind oferece um conjunto poderoso e flexível de ferramentas. Ele incentiva a criação dentro de restrições cuidadosamente projetadas, garantindo a consistência do design e proporcionando total liberdade aos desenvolvedores, sendo uma poderosa ferramenta para a prototipagem rápida e o desenvolvimento de produtos em projetos modernos da Web.

Perguntas frequentes Perguntas frequentes

O Tailwind CSS pode fazer com que o HTML fique excessivamente complexo (ou “engrossado”, em termos de código)?

De facto, utilizar o Tailwind CSS adiciona muitos nomes de classes aos elementos HTML, o que pode tornar o HTML um pouco redundante.

No entanto, esta “redundância” é estruturada e previsível, transferindo, na verdade, a complexidade do estilo do CSS para o HTML, que é mais fácil de gerir. Mais importante ainda, através da configuração content Durante a compilação, as ferramentas de produção removem todas as classes CSS não utilizadas, resultando num ficheiro CSS final muito mais pequeno do que o criado manualmente ou utilizando bibliotecas de componentes. Por conseguinte, oferece uma vantagem em termos de desempenho.

Como substituir ou modificar os estilos padrão do Tailwind?

Você pode sobrescrever o estilo padrão de várias maneiras. A forma mais recomendada é em tailwind.config.js Os documentos theme.extend Algumas partes podem ser expandidas, permitindo a adição de novos valores sem afetar o sistema original. Se você quiser substituir completamente uma chave de tema (como a cor), basta fazê-lo diretamente no theme Não, eu quero redefini-lo. Além disso, use-o antes das classes práticas. !important Os modificadores (como !text-red-500(2) Também é possível anular um estilo utilizando um seletor de maior especificidade em CSS.

Qual é o conjunto de frameworks front-end com os quais o Tailwind CSS é compatível para uso?

O Tailwind CSS integra-se perfeitamente com quase todos os frameworks front-end modernos. Ele suporta nativamente React, Vue, Angular, Svelte, etc. Basta certificar-se de que os nomes das classes são utilizados corretamente nos modelos ou no JSX do framework e configurar o PostCSS e o Tailwind no processo de compilação. Muitos frameworks (como Next.js e Vite) fornecem até exemplos de integração ou plugins oficiais do Tailwind CSS, o que torna o processo de integração ainda mais fácil.

Para usar o Tailwind CSS, é necessário desistir de escrever CSS à mão?

Não é necessário de todo. O Tailwind CSS não exclui o CSS escrito à mão, mas complementa-o. Ainda pode criar ficheiros CSS personalizados para os seus projetos. O Tailwind @apply A instrução permite-lhe reutilizar as suas classes de utilidade no CSS personalizado. Para estilos extremamente especiais, que não podem ser implementados com combinações de classes práticas, ou cenários que necessitem de funcionalidades CSS complexas (como animações de quadros-chave), escrever CSS manualmente continua a ser necessário. O Tailwind apenas fornece uma forma mais eficiente de lidar com as necessidades de estilo comuns em projetos, que excedem os 90%.