Introdução

Tailwind CSS é uma estrutura CSS popular que prioriza a utilidade e fornece classes utilitárias de baixo nível para aplicar estilos diretamente na marcação, levando a ciclos de desenvolvimento mais rápidos.

Prettier, por outro lado, é um formatador de código amplamente utilizado que garante que seu código seja formatado de forma consistente, analisando-o e reimprimindo-o com suas próprias regras. Isso ajuda a manter um estilo de código uniforme em todo o projeto, tornando a base de código mais limpa e fácil de ler.

Um desafio comum ao usar Tailwind CSS é gerenciar a ordem das classes utilitárias, especialmente à medida que a complexidade de seus estilos e HTML aumenta. Classificar manualmente essas classes pode ser tedioso e sujeito a erros. É aqui que entra a classificação automática de classes. Ao aproveitar ferramentas como Prettier junto com plug-ins como prettier-plugin-tailwindcss, podemos automatizar a classificação de classes CSS do Tailwind, garantindo uma ordem consistente e melhorando a legibilidade e manutenção das classes. ]

O objetivo deste artigo é guiá-lo através do processo de configuração da classificação automática de classes CSS do Tailwind com Prettier em projetos novos e existentes. Esteja você iniciando um novo projeto ou integrando-se a um projeto em andamento, este guia completo fornecerá instruções passo a passo.

Índice

Configurando Tailwind CSS e mais bonito em um novo projeto
• Inicializando o projeto e instalando Tailwind CSS
  Instalar e configurar o mais bonito
Configurando prettier-plugin-tailwindcss em um projeto CSS existente do Tailwind
Conclusão

Configurando Tailwind CSS e mais bonito em um novo projeto

Antes de começarmos, certifique-se de ter o seguinte instalado:

Node.js
Um gerenciador de pacotes (usaremos bun para este projeto, mas você pode usar npm, yarn ou pnpm se preferir)
Um editor de código (por exemplo, VS Code)

Inicializando o projeto e instalando Tailwind CSS

Comece criando um novo projeto. As etapas específicas podem variar dependendo da estrutura ou configuração de sua preferência. Consulte o Guia da estrutura de instalação do Tailwind CSS para obter instruções detalhadas. Se você já concluiu as etapas de instalação do Tailwind CSS, prossiga para a seção Configurando o prettier-plugin-tailwindcss em um projeto existente do Tailwind CSS. Veja como fazer isso usando Vite:

bun create vite my-app --template react-ts cd meu-app instalação de pão

bun create vite my-app --template react-ts
cd my-app
bun install

Agora vamos instalar e configurar Tailwind CSS

bun install -D tailwindcss postcss autoprefixer bunx tailwindcss inicialização -p

bun create vite my-app --template react-ts
cd my-app
bun install

Você deverá ver um arquivo de configuração CSS do Tailwind: tailwind.config.js, copie o seguinte conteúdo nele.

/** @type {import('tailwindcss').Config} */ padrão de exportação { conteúdo: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], tema: { ampliar: {}, }, plug-ins: [], };

bun create vite my-app --template react-ts
cd my-app
bun install

Adicione as seguintes diretivas do Tailwind ao topo do seu arquivo CSS (por exemplo, src/index.css):

@base do vento de cauda; Componentes @tailwind; Utilitários @tailwind;

bun create vite my-app --template react-ts
cd my-app
bun install

Instalar e configurar mais bonito

bun install -D mais bonito mais bonito-plugin-tailwindcss

bun create vite my-app --template react-ts
cd my-app
bun install

Crie um arquivo de configuração mais bonito na raiz do seu projeto e adicione o plugin prettier-plugin-tailwindcss ao arquivo de configuração, estaríamos usando .prettierrc, você pode verificar outros tipos de arquivo de configuração mais bonitos aceitáveis ​​aqui aqui

{ "plugins": ["plugin mais bonito-tailwindcss"] }

bun create vite my-app --template react-ts
cd my-app
bun install

Agora vamos testar a configuração, modificar o arquivo src/App.tsx e salvá-lo.

importar {useState} de "react"; importar "./App.css"; aplicativo const = () => { const [contagem, setCount] = useState(0); retornar ( > ); }; exportar aplicativo padrão;

bun create vite my-app --template react-ts
cd my-app
bun install

Resultado:

importar {useState} de "react"; importar "./App.css"; aplicativo const = () => { const [contagem, setCount] = useState(0); retornar ( > ); }; exportar aplicativo padrão;

bun create vite my-app --template react-ts
cd my-app
bun install

Configurando prettier-plugin-tailwindcss em um projeto CSS existente do Tailwind

Se o seu projeto já tiver o Prettier configurado, a integração do plugin prettier-plugin-tailwindcss é simples. Você só precisa instalar o plugin e configurá-lo. Se o Prettier ainda não estiver instalado, você precisará configurá-lo junto com o plugin.

Para projetos com uma configuração mais bonita existente, execute:

bun add -D mais bonito-plugin-tailwindcss

bun create vite my-app --template react-ts
cd my-app
bun install

Para projetos sem nenhuma configuração mais bonita existente, execute:

bun add -D mais bonito mais bonito-plugin-tailwindcss

bun create vite my-app --template react-ts
cd my-app
bun install

Adicione o plugin à sua configuração existente do Prettier. Se não houver nenhuma configuração do Prettier existente, crie um arquivo .prettierrc na raiz do seu projeto. Em seguida, adicione o seguinte:

{ "plugins": ["plugin mais bonito-tailwindcss"] }

bun create vite my-app --template react-ts
cd my-app
bun install

Garanta que o Prettier esteja funcionando corretamente fazendo alterações em um arquivo com classes CSS do Tailwind. Salve o arquivo e verifique se as classes CSS do Tailwind são classificadas automaticamente.

Conclusão

Integrar prettier-plugin-tailwindcss em projetos Tailwind CSS novos e existentes melhora seu fluxo de trabalho de desenvolvimento, garantindo uma classificação de classe consistente e organizada. Para novos projetos, você pode configurar o Prettier e o plugin simultaneamente para agilizar sua configuração inicial. Para projetos existentes, basta adicionar o plug-in à configuração existente do Prettier ou instalar o Prettier e o plug-in se o Prettier ainda não estiver configurado.

Para opções de configuração adicionais, como classificação de classes em atributos não padrão, visite a documentação do prettier-plugin-tailwindcss.