🔧 Dicas para escrever Tailwind CSS de forma limpa

Tailwind é uma ótima opção de escolha de estilização para seu projeto se você deseja ter uma ótima produtividade no desenvolvimento e um design flexível em suas aplicações, no entanto, conforme você vai trabalhando em seu projeto vai aumentando de complexidade você pode notar alguns pontos negativos na experiência de desenvolvimento. Sobre isso, resolvi escrever esse artigo para informar dicas para escrever seu código tailwind de forma de "clean".

1. Use o plugin prettier

Para garantir a padronização de código em nossos projetos frontend geralmente utilizamos o conjunto de ferramento eslint + prettier para definir os padrões desejados em nosso código.

Usando tailwind existe um pacote chamado prettier-plugin-tailwindcss ele basicamente vai pegar as classes do tailwind adicionadas no HTML e vai setar um padrão automático e recomendado para manter a consistência em toda a parte do código.

2. Composition Pattern

O design pattern composition é um pattern que basicamente serve para criar estruturas complexas a partir de estruturas mais simples. Em projetos frontend seria criar pequenos componentes que juntos possam formar um componente maior, com isso, é possível criar componentes altamente customizáveis evitando “prop drilling” deixando seu código tailwind mais simples de se ler com essa divisão em pequenos arquivos.

3. TwMerge

O twMerge é uma biblioteca que aumenta o poder do Tailwind, ela serve para mesclar e compor classes do Tailwind e consegue lidar com conflitos de classes que possam gerar em sua aplicação. É bastante útil para aplicações frontend onde podemos ter muitos estilos, funções e interações dinâmicas baseadas em estados.

4. clsx

clsx é uma biblioteca de manipulação de classes CSS que permite combinar, condicionar e de duplicar nomes de classes de forma simples e eficiente.

5. Combinando TwMerge + clsx

Você pode combinar as duas bibliotecas também para criar wrapper e utilizar as duas funcionalidades em conjunto.

import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs))
}

6. CVA

Outra biblioteca fantástica para você que sente saudade de utilizar CSS-in-JS é o CVA com ela você consegue criar variantes para seus componentes. E você também pode combinar e utilizar o wrapper cn que criamos anteriormente. Exemplo abaixo de um componente de botão simples:

// components/button.tsx
import { cva, VariantProps } from 'class-variance-authority'
import { ComponentProps } from 'react'
import { cn } from '@/lib/utils'

const buttonStyles = cva('font-semibold border rounded ', {
  variants: {
    variant: {
      primary: [
        'bg-blue-500',
        'text-white',
        'border-transparent',
        'hover:bg-blue-600',
      ],
      secondary: [
        'bg-white',
        'text-gray-800',
        'border-gray-400',
        'hover:bg-gray-100',
      ],
    },
    size: {
      small: ['text-sm', 'py-1', 'px-2'],
      medium: ['text-base', 'py-2', 'px-4'],
    },
  },
  defaultVariants: {
    variant: 'primary',
    size: 'medium',
  },
})

type buttonProps = VariantProps<typeof buttonStyles> & ComponentProps<'button'>

export const Button = ({ variant, size, className, ...props }: buttonProps) => {
  return (
    <button
      {...props}
      className={cn(buttonStyles({ variant, size }), className)}
    />
  )
}

//App.tsx

import { Button } from './button'

export const App = () => {
  <>
    <Button variant={'primary'} size={'medium'}>Primary</Button>
    <Button variant={'secondary'} size={'small'}>Secondary</Button> 
  </>
} 

7. Outros

Existem outras bibliotecas semelhantes ao CVA como windstitch e Tawild variants entre outras. Eu tenho pessoalmente gostado de utilizar Tawild variants e creio que vale a pena você testar também.

Conclusão

Utilizando essas dicas em seu projeto frontend com Tailwind CSS você pode aumentar a flexibilidade, legibilidade, reutilização e trazer mais facilidade ao gerenciar suas classes no Tailwind CSS. Facilitando seus possíveis testes end two end trazendo mais facilidade na integração de novas pessoas nos projetos. Com isso, o processo de criação de interfaces modernas, responsivas e interativas fica melhor, aumentando a qualidade do seu código e do seu produto final.