Guia de introdução ao Tailwind CSS: construir uma página web moderna e responsiva do zero

O que é o Tailwind CSS?

O Tailwind CSS é um framework CSS que dá prioridade às funcionalidades. Ele ajuda os desenvolvedores a criar interfaces de usuário personalizadas rapidamente, fornecendo um grande número de classes úteis e combináveis. Diferente de frameworks como o Bootstrap, que oferecem componentes pré-definidos (como botões e cartões), o Tailwind CSS não fornece componentes com estilos fixos. Em vez disso, ele disponibiliza uma série de classes pequenas e de uso único. text-center、bg-blue-500、p-4 etc.

开发者通过直接在 HTML 的 class 属性中组合这些类来构建任何设计。这种方法消除了在 CSS 文件和 HTML 文件之间频繁切换的需要，将样式直接写在标记语言中，从而极大地提高了开发速度。同时，它通过约束设计 token（如颜色、间距、字体大小），强制执行了设计系统的一致性。

Sua principal vantagem reside na alta personalizabilidade e na flexibilidade extrema. Isso é possível através dos arquivos de configuração. tailwind.config.jsVocê pode definir facilmente o seu próprio sistema de design, incluindo paletas de cores, proporções de espaçamento, pontos de quebra (breakpoints), etc. O CSS gerado conterá apenas as classes que você realmente utilizou, resultando em arquivos de produção muito compactos em tamanho.

Leitura recomendada Guia completo para a criação de um website: do zero até à sua publicação, implementando um processo moderno e eficiente de criação de websites.。

Como começar a instalar e configurar?

Para começar a usar o Tailwind CSS, é necessário integrá-lo ao seu projeto primeiro. A maneira recomendada é instalá-lo usando Node.js e npm (ou yarn).

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 →

Instale os pacotes essenciais através do npm.

Primeiramente, use o npm para inicializar o projeto (se ainda não o tiver feito), e depois instale o Tailwind CSS e suas dependências. Execute os seguintes comandos no diretório raiz do seu projeto:

npm install -D tailwindcss postcss autoprefixer

Este comando instalará o próprio Tailwind CSS, o PostCSS (um ferramenta usada para processar e converter arquivos CSS) e o Autoprefixer (um utilitário que adiciona automaticamente prefixos específicos dos fabricantes de navegadores).

Generate a configuration file.

Em seguida, gere os arquivos de configuração padrão para Tailwind CSS e PostCSS:

npx tailwindcss init -p

Este comando criará dois arquivos:tailwind.config.js e postcss.config.js1. Entre eles tailwind.config.js Este é o principal local onde você personaliza e projeta o sistema.

Leitura recomendada Guia de criação de websites: o processo completo e as tecnologias fundamentais para criar um website de alta performance do zero.。

\nConfigurar o caminho do modelo

Para que o Tailwind possa eliminar automaticamente os estilos não utilizados (ou seja, realizar o processo de “Tree Shaking”), você precisa… tailwind.config.js Specifique todos os caminhos dos arquivos de origem que contêm o nome da classe Tailwind. Encontre-os. content Adicione os campos e faça a configuração deles:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 根据你的项目结构调整路径
  theme: {
    extend: {},
  },
  plugins: [],
}

Introduzir estilos básicos

Por último, no seu ficheiro CSS principal (por exemplo, src/input.css ou styles/globals.cssNeste artigo, usamos @tailwind As instruções devem conter todas as camadas (layers) do Tailwind CSS.

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Em seguida, no seu processo de construção (por exemplo, usando Vite, Webpack ou diretamente através da CLI), processe esse arquivo CSS para gerar a tabela de estilos final.

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

Conceitos Centrais e Classes Práticas

Para entender o core do Tailwind CSS, é essencial dominar as regras de nomeação de suas classes práticas e os métodos de design responsivo.

Regras de Nomenclatura para Classe Prática

Os nomes das classes práticas do Tailwind seguem um padrão intuitivo:{属性}{方向}-{尺寸}Por exemplo:
* mt-4：margin-top: 1rem; Em Tailwind, 1 unidade geralmente equivale a 0,25rem; portanto, 4 representa 1rem.
* px-6：padding-left: 1.5rem; e padding-right: 1.5rem;。
* bg-gray-100：background-color: #f3f4f6;。
* text-xl：font-size: 1.25rem; line-height: 1.75rem;。
* rounded-lg：border-radius: 0.5rem;。

Esse método de nomeação torna a intenção dos estilos muito clara ao escrever HTML, eliminando a necessidade de se lembrar de nomes de classes CSS personalizadas.

Leitura recomendada Guia completo para a criação de websites modernos: práticas técnicas e análise de estratégias, do início ao lançamento.。

Design responsivo e prefixos de pontos de interrupção

O Tailwind utiliza um sistema de pontos de quebra (breakpoints) com prioridade para dispositivos móveis. As classes padrão são adequadas para todos os tamanhos de tela (incluindo dispositivos móveis). Para aplicar estilos a telas maiores, é necessário adicionar um prefixo específico ao nome da classe que corresponda ao tamanho da tela desejado.
Os pontos de interrupção padrão incluem:
* sm: (640px)
* md: (768px)
* lg: (1024px)
* xl: (1280px)
* 2xl: (1536px)

Por exemplo.<div class="text-center md:text-left"> Isso indica que o texto deve ser alinhado à esquerda em telas de tamanho médio e superior, e alinhado no centro em telas de outros tamanhos.

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

Variantes de estado e pseudoclasses

O Tailwind oferece uma ampla gama de prefixos para lidar com diferentes estados dos elementos, como hover (ao passar o mouse), foco (ao receber atenção do usuário) e ativado (quando o elemento está em uso). Esses prefixos são combinados com classes práticas usando dois pontos (:).
Os prefixos de variantes comuns incluem:
* hover: (:hover)
* focus: (:focus)
* active: (:active)
* disabled: (:disabled)

Por exemplo.<button class="bg-blue-500 hover:bg-blue-700"> Será criado um botão com a cor padrão azul, que muda para azul escuro ao ser passado o mouse sobre ele. Você pode fazer isso no arquivo de configurações. theme.extend Algumas dessas variantes são personalizadas.

Criar um componente de cartão responsivo

Agora, vamos colocar o conhecimento adquirido em prática e criar um componente de cartão responsivo moderno. Este cartão conterá uma imagem, um título, uma descrição e um botão, e seu layout se ajustará de forma agradável em diferentes tamanhos de tela.

Estrutura HTML básica para criar cartões

Começamos com os contêineres e o conteúdo mais básicos. Crie um… .html Arquivo, e escreva a seguinte estrutura:

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Imagem da cartão">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Título do cartão no Tailwind CSS</div>
    <p class="text-gray-700 text-base">
      Este é um texto de descrição sobre este cartão. Ele apresenta o conteúdo ou as características principais do cartão. O uso do Tailwind CSS permite criar designs como este de forma rápida.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Saiba mais
    </button>
  </div>
</div>

Neste momento, você já tem um modelo básico de cartão: fundo branco, cantos arredondados, sombra, imagem e botão.

Adicionar ajustes de layout responsivo

Nós queremos que os cartões sejam exibidos em pilha vertical em dispositivos móveis e em tela de tamanho médio (como tablets) ou maiores, onde possam ser mostrados lado a lado. Isso pode ser alcançado utilizando o Flexbox e pontos de quebra (breakpoints) responsivos. Vamos envolver o contêiner dos cartões dentro de um contêiner Flex.

<div class="container mx-auto p-4">
  <div class="flex flex-col md:flex-row gap-6"> <!-- 响应式 Flex 方向 -->
    <!-- 卡片 1 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Imagem da cartão">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">Título do Cartão 1</div>
        <p class="text-gray-700 text-base mb-4">
          Descrição do conteúdo do cartão um.
        </p>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          Operação Um
        </button>
      </div>
    </div>
    <!-- 卡片 2 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/401/300" alt="Imagem da cartão">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">Título do Cartão 2</div>
        <p class="text-gray-700 text-base mb-4">
          Descrição do conteúdo do cartão dois.
        </p>
        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          Operação Dois
        </button>
      </div>
    </div>
  </div>
</div>

Pontos principais:
1. flex flex-col md:flex-rowO contêiner externo é exibido verticalmente por padrão.flex-colEm telas de tamanho médio, os elementos passam a ser exibidos em ordem horizontal.md:flex-row）。
2. gap-6Adicionar espaços entre os itens filhos do Flex.
3. flex-1Divida o espaço igualmente entre duas cartões quando eles estiverem em layout horizontal.
4. w-full md:w-autoO botão ocupa toda a largura no dispositivo móvel e retorna à largura automática em telas de tamanho médio ou superior.

Estilos personalizados para o comportamento ao passar o mouse (hover) e ao receber foco

Para tornar a interação mais agradável, podemos adicionar um efeito de “hover” (ao passar o mouse sobre o elemento) ao próprio contêiner das cartões e otimizar o estilo do foco dos botões.

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1 transition duration-300 ease-in-out hover:shadow-2xl hover:-translate-y-1">
  ...
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out w-full md:w-auto">
    Saiba mais
  </button>
  ...
</div>

Aqui adicionamos:
* transition duration-300 ease-in-outAdicione transições suaves para todas as alterações nos atributos do cartão.
* hover:shadow-2xl hover:-translate-y-1Ao passar o mouse sobre o elemento, a sombra aumenta de tamanho e move-se ligeiramente para cima, criando um efeito de “flutuação”.
* focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50Remova o contorno de foco padrão do navegador e substitua-o por um halo azul personalizado, o que se encaixa melhor no design.

resumos

O Tailwind CSS revolucionou a maneira como os desenvolvedores front-end criam estilos, através de sua metodologia baseada em classes práticas e com foco na funcionalidade. Ele elimina a perda de contexto que ocorre ao alternar entre arquivos, integrando as decisões de design diretamente no HTML, o que resulta em uma eficiência de desenvolvimento surpreendente. Desde a instalação e configuração até a compreensão de suas regras de nomeação intuitivas, e passando pelo uso de pontos de quebra responsivos e variantes de estado para construir componentes complexos, todo o processo reflete a liberdade dentro de restrições claras.

Através da prática de construir um componente de cartão responsivo, vimos como combinar classes práticas de granularidade fina para criar um design completo e implementar facilmente efeitos interativos e adaptação a vários dispositivos. Embora no início os nomes das classes possam parecer longos, uma vez que você se familiarizar com o padrão, a velocidade de desenvolvimento aumentará significativamente. O Tailwind CSS não é apenas um framework CSS, mas também um poderoso e personalizável motor de sistemas de design, adequado para uma variedade de cenários, desde o design de protótipos até projetos de produção em larga escala.

Perguntas frequentes Perguntas frequentes

Os ficheiros CSS gerados pelo Tailwind CSS são muito grandes?

Não. Essa é exatamente uma das principais vantagens do Tailwind CSS. Durante a construção do código para produção, o Tailwind executa um processo de “limpeza” (chamado de “Purge” nas versões 3.0 e posteriores, ou “Content Analysis”). Esse processo analisa todos os arquivos de template que você especificou no arquivo de configuração (como HTML, JSX, Vue) para identificar quais classes práticas foram utilizadas e, em seguida, gera apenas essas classes no arquivo CSS final.

Os estilos não utilizados serão completamente removidos; portanto, o arquivo CSS final resultante geralmente tem entre alguns KB e alguns dez KB, o que é muito menor do que muitos arquivos CSS criados manualmente ou que utilizam bibliotecas de componentes tradicionais. Isso é possível graças à configuração precisa. content O caminho (ou a rota) é essencial para garantir que o processo de análise seja correto e sem erros.

Nomes de classes práticas tão longos podem tornar o HTML difícil de ler, não é?

这是一个常见的初次印象。确实，HTML 中的 class 属性会变得很长。然而，许多开发者认为这是一种权衡，并且带来了几个好处：首先，你无需为类名起名而苦恼（如 card-container-inner-wrapperAlém disso, não é necessário alternar entre os arquivos CSS e HTML para encontrar as definições de estilo; todos os estilos estão claramente escritos diretamente nos elementos.

Em segundo lugar, no que diz respeito à colaboração em equipe, ele fornece uma linguagem de design consistente, o que permite que os novatos entendam rapidamente a intenção dos estilos utilizados. Para melhorar a legibilidade, você pode utilizar… @apply As instruções sugerem que os conjuntos de classes práticas mais utilizados sejam extraídos para o CSS, sendo utilizados como componentes personalizados. Além disso, é possível aproveitar plugins de editores (como o Tailwind CSS IntelliSense) para obter funcionalidades de preenchimento automático de código e realce de sintaxe, o que melhora significativamente a experiência de desenvolvimento.

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

O Tailwind CSS pode ser integrado perfeitamente com quase todos os frameworks e bibliotecas front-end modernos. Em essência, ele apenas gera código CSS, sem depender de nenhum ambiente de execução JavaScript específico.

Nos frameworks React, Vue, Angular, Svelte e outros, você pode usar os nomes de classes do Tailwind da mesma forma que no HTML comum. A comunidade também fornece plugins e ferramentas oficiais ou de terceiros específicos para esses frameworks. @headlessui/react(Produzido oficialmente pela Tailwind, oferece componentes interativos sem estilo pré-definido) Pode ser integrado perfeitamente aos estilos que você criou usando a Tailwind. Basta garantir que o seu processo de compilação (como Vite ou Webpack) esteja configurado corretamente para o uso do PostCSS e da Tailwind.

Como personalizar as cores do tema e os espaços entre os elementos?

Todos os ajustes personalizados foram feitos. tailwind.config.js Os documentos theme Parte do processo é realizada dessa maneira. O Tailwind utiliza duas estratégias: “extender” (estender) e “override” (sobrepor). Se você deseja adicionar novos valores mantendo os valores padrão, deve usar a estratégia de “extender”. extend。

Por exemplo, para adicionar uma cor da marca e aumentar a proporção do espaçamento:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Após a configuração, você poderá usá-lo diretamente. bg-brand e p-128 Essa é a classe em questão. Se você deseja substituir completamente a paleta de cores padrão ou as escalas de espaçamento, basta colocar as novas definições diretamente nela. theme Abaixo, e não… extend O sistema de configuração do Tailwind é muito flexível, permitindo que você crie um sistema de design totalmente personalizado.