Tailwind CSS: um guia prático, do início ao fim, para criar páginas web modernas e responsivas.

Na área de desenvolvimento front-end,Tailwind CSS Com a sua filosofia única de "Utilidade em Primeiro Lugar", rapidamente se tornou a ferramenta preferida para criar interfaces de utilizador modernas. Ao fornecer uma grande quantidade de classes CSS granulares e de função única, permite aos programadores criar rapidamente qualquer design diretamente no HTML, mantendo o tamanho do ficheiro de estilos o mais reduzido possível. Ao contrário dos frameworks de CSS tradicionais,Tailwind CSS Não são fornecidos componentes pré-fabricados (como botões e cartões), mas é fornecida uma série de ferramentas básicas para criar componentes, o que proporciona aos desenvolvedores uma grande flexibilidade e controle. Este artigo irá guiá-lo desde os conceitos básicos até os mais avançados, ajudando-o a dominar a sua utilização. Tailwind CSS Um processo completo para criar páginas web modernas, responsivas e acessíveis de forma eficiente.

O que é o Tailwind CSS e quais são as suas principais vantagens?

Tailwind CSS É um framework CSS com foco em funcionalidades, que contém um grande número de recursos, como… flex、pt-4、text-center e rotate-90 Tais classes podem ser combinadas diretamente nas marcas HTML para construir qualquer design.

A filosofia que dá prioridade à praticidade.

A sua filosofia central é a “prioridade prática”. Isso significa que o framework fornece apenas os tipos de estilos mais básicos e com funções únicas, e não componentes encapsulados com aparências específicas. Por exemplo, para criar um botão com margem interna, fundo azul e texto branco, não é necessário escrever CSS personalizado ou usar um componente com esse nome. btn-primary Não utilize componentes de classe, mas combine-os diretamente no HTML. px-4 py-2、bg-blue-600 e text-white Estas ferramentas... Esta abordagem acelera significativamente o processo de prototipagem e desenvolvimento, pois não é necessário alternar constantemente entre os ficheiros HTML e CSS.

Leitura recomendada Introdução e prática do Tailwind CSS: construir um site moderno e responsivo do zero。

Análise das principais vantagens

fazer uso de Tailwind CSS Isso traz várias vantagens. Em primeiro lugar, restringe significativamente as suas opções de design, evitando valores arbitrários, tornando o sistema de design mais consistente e fácil de manter. Em segundo lugar, como os estilos são escritos diretamente no HTML, não é necessário gastar tempo a pensar em nomes de classes CSS para os componentes, evitando também que os ficheiros CSS fiquem sobrecarregados com estilos não utilizados. Por último, graças ao seu poderoso design responsivo e suporte para variantes de estado (como o 'hover' e o 'focus'), é possível criar facilmente interfaces que se adaptam a vários tamanhos de ecrã e estados de interação.

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 →

Como começar a usar o Tailwind CSS?

começar a usar Tailwind CSS Existem várias maneiras de fazer isso, sendo a mais recomendada através da ferramenta CLI oficial ou da integração com ferramentas de criação de front-end, como Vite e Webpack.

Instalar através de ferramentas de construção

Para a maioria dos projetos front-end modernos, instalar e configurar o PostCSS através do npm é a melhor prática. Primeiro, instale-o usando o npm ou o yarn. tailwindcss E suas dependências.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Isso irá criar dois ficheiros:tailwind.config.js e postcss.config.js. Em tailwind.config.js Neste caso, você precisa configurar content Opções, especifique quais arquivos contêm as suas classes de ferramentas, para que Tailwind CSS Durante a compilação da produção, pode-se otimizar com a técnica de “shaking the tree” para remover estilos não utilizados.

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

Introduzir estilos básicos

Em seguida, no seu arquivo CSS principal (por exemplo,... src/index.css ou src/app.css) e introduzir Tailwind CSS As instruções.

Leitura recomendada Do iniciante ao especialista: um guia prático para construir sites modernos com Tailwind CSS。

@tailwind base;
@tailwind components;
@tailwind utilities;

Agora, execute o seu processo de construção (por exemplo, npm run dev），Tailwind CSS Em seguida, estas instruções serão processadas, gerando todas as classes de ferramentas correspondentes, que poderão ser utilizadas no HTML ou JSX do projeto.

Funções principais e dicas práticas

Dominar Tailwind CSS A funcionalidade central é a chave para um desenvolvimento eficiente, incluindo, principalmente, design responsivo, variantes de estado e configuração personalizada.

Implementação de design responsivo

Tailwind CSS Adote um sistema de pontos de interrupção com prioridade para dispositivos móveis. Os prefixos padrão para os pontos de interrupção são, por exemplo: sm:、md:、lg:、xl:、2xl: Permite-lhe aplicar estilos a diferentes tamanhos de ecrã. Por exemplo,text-base md:text-lg Indica a utilização de uma fonte de letra maior em ecrãs de tamanho médio e superior.

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="text-center p-4 md:text-left md:p-8 lg:flex">
  <!-- 内容 -->
</div>

Variantes de estado e pseudoclasses

O framework inclui suporte para pseudo-classes e estados comuns, basta adicionar o prefixo correspondente antes da classe de utilitários. Por exemplo,hover:bg-gray-100 Vai alterar a cor de fundo quando o rato passa por cima dele.focus:ring-2 focus:ring-blue-500 Isso adicionará um anel azul quando o elemento ganhar o foco, o que é muito útil para garantir a acessibilidade. Também pode ser usado em combinação com outros elementos, como por exemplo: dark:bg-gray-800 dark:hover:bg-gray-700 Para implementar os efeitos de interação no modo escuro.

Personalização e extensão

mesmo que Tailwind CSS São fornecidos vários tokens de design predefinidos (cores, espaçamento, tamanho da fonte, etc.), mas você pode personalizá-los completamente. Através da modificação tailwind.config.js No arquivo theme Parte, você pode expandir ou cobrir o tema padrão. Por exemplo, adicionar cores personalizadas ou expandir a proporção de espaçamento.

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

Além disso, também pode utilizar @layer A instrução extrai as classes de componentes no CSS e agrupa as classes de ferramentas comuns numa nova classe, para evitar a repetição no HTML.

Leitura recomendada Guia prático do Tailwind CSS: um tutorial completo para criar páginas web modernas e responsivas.。

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

Construir na prática: uma barra de navegação responsiva

Vamos aplicar os conhecimentos acima, criando uma barra de navegação responsiva comum. Esta barra de navegação é apresentada horizontalmente nos ecrãs grandes e dobra-se para um menu hambúrguer nos ecrãs pequenos.

Construção da estrutura HTML

Primeiro, vamos estabelecer a estrutura básica do HTML, usando tags semânticas e aplicando as classes de utilitários iniciais.

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

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo/品牌 -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white text-xl font-bold">Minha marca</a>
      </div>
      <!-- 桌面端导航链接（默认隐藏，中等屏幕显示） -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Página inicial</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Sobre</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">serviço</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contato</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化） -->
          <span class="sr-only">Abra o menu principal.</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端菜单（默认隐藏） -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Página inicial</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Sobre</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">serviço</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contato</a>
    </div>
  </div>
</nav>

Adicionar funcionalidades interativas

O HTML acima fornece uma estrutura visual e um layout responsivo, mas a alternância do menu para dispositivos móveis requer JavaScript. Podemos adicionar um script simples para alternar hidden Classe.

// 例如在您的JS文件中
document.querySelector('nav button').addEventListener('click', function() {
  const menu = document.getElementById('mobile-menu');
  menu.classList.toggle('hidden');
});

Este exemplo mostra como, usando apenas Tailwind CSS A ferramenta permite criar rapidamente um componente com um layout responsivo e efeitos visuais básicos, mantendo a lógica de interação simples e separada.

resumos

Tailwind CSS Através da sua metodologia prioritariamente prática, mudou completamente a forma como os programadores escrevem CSS. Ao fornecer um conjunto completo e consistente de ferramentas para sistemas de design, melhorou significativamente a eficiência e a consistência no desenvolvimento de interfaces de utilizador. Desde a instalação e configuração convenientes, ao poderoso suporte para variantes responsivas e de estado, até às capacidades avançadas de personalização.Tailwind CSS Fornece uma solução poderosa e flexível para criar páginas web modernas, desde páginas simples até aplicações complexas. Embora o aprendizado inicial exija memorizar um grande número de nomes de classes, uma vez dominado, a velocidade de desenvolvimento e a capacidade de controlar com precisão o design são incomparáveis com os métodos tradicionais de CSS. Abrace isso! Tailwind CSSIsso significa adotar um fluxo de trabalho de desenvolvimento front-end mais rápido e fácil de manter.

Perguntas frequentes Perguntas frequentes

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

Esta é, de facto, uma preocupação comum. A utilização de Tailwind CSS Depois, o número de nomes de classes no HTML aumentará, o que poderá parecer mais complicado.

No entanto, esta “inflação” traz enormes benefícios: o tamanho dos seus ficheiros CSS torna-se muito pequeno em ambiente de produção, porque Tailwind Através da técnica de “agitar a árvore”, apenas os estilos que você realmente usou serão gerados. Ao mesmo tempo, você não precisa mais escrever e manter nomes de classes CSS personalizados, o que elimina o acúmulo de código de estilo não utilizado. Em muitos projetos, o resultado final é positivo.

Como adicionar CSS personalizado ao Tailwind CSS?

Na maioria dos casos, não necessita de escrever CSS personalizado, uma vez que quase todos os estilos podem ser implementados através de combinações de classes de utilitários.

Se for necessário adicionar estilos personalizados, existem três formas principais de o fazer: em primeiro lugar, no tailwind.config.js Os documentos theme.extend Em primeiro lugar, expanda o tema (como cores personalizadas e espaçamento). Em segundo lugar, use < em seu arquivo CSS. @layer Instruções:@layer components, @layer utilitiesPara adicionar novas classes de componentes ou classes de ferramentas. Por último, também pode escrever CSS normal em qualquer local e utilizá-lo. @apply A instrução irá injetar as ferramentas existentes nas suas regras personalizadas.

É adequado para ser utilizado com frameworks como o React e o Vue?

É absolutamente perfeito e, sem dúvida, um par perfeito.Tailwind CSS Integrase muito bem com frameworks front-end modernos, como React, Vue e Svelte.

Nestas estruturas modulares, pode-se encapsular a estrutura HTML combinada com classes de ferramentas em componentes reutilizáveis, o que resolve perfeitamente o problema da perceção de “HTML pesado”. Por exemplo, um componente que utiliza < Tailwind CSS Para botões de estilo, você só precisa de os definir uma vez. Button Os componentes são, então, reutilizados em toda a aplicação, mantendo uma única fonte de estilo e um HTML simplificado.

Como otimizar o tamanho do código do Tailwind CSS em um ambiente de produção?

Tailwind CSS Inclui poderosas funcionalidades de otimização de produção. O elemento central é o “Shake Tree” ou a “Remoção de estilos não utilizados”.

Você precisa garantir que, no tailwind.config.js Não. content Na configuração, todos os caminhos dos ficheiros de origem que contêm os nomes das ferramentas (como ficheiros HTML, JSX e Vue) são especificados corretamente. Quando se executa o comando de construção de produção (que normalmente inclui <), NODE_ENV=productionQuandoTailwind CSS Estes ficheiros são digitalizados e apenas o CSS correspondente às classes encontradas é gerado, o que reduz significativamente o tamanho do ficheiro CSS final. Normalmente, o tamanho do CSS pode ser reduzido de centenas de KB para cerca de 10 KB.