Prettier Plugin TailwindCSS

Olá pessoal, como o TailwindCSS se tornou o framework de estilização padrão do Next.js estava pesquisando um pouco mais sobre esse framework css tão amado e tão odiado ao mesmo tempo, depois desta decisão da equipe do Next.js acredito que o TailwindCSS vai se tornar ainda mais popular. Nessas pesquisas encontrei uma maneira de fazer com que as classes fiquem organizadas em uma ordem que facilita a leitura, tornando menos confusa principalmente em uma necessidade de manutenção por um outro desenvolvedor, o plugin em questão é o prettier-plugin-tailwindcss, bem simples de ser configurado, segue o passo a passo:

Caso não tenha instalado o prettier

npm install prettier prettier-plugin-tailwindcss -D

Com o prettier já instalado

npm install prettier-plugin-tailwindcss -D

Para de fato ativar o plugin crie um arquivo na raiz do projeto com o seguinte nome .prettierrc, no repositório oficial recomenda que o nome do arquivo seja prettier.config.js:

// .prettierrc
{
plugins: [require('prettier-plugin-tailwindcss')],
}

// prettier.config.js
module.exports = {
plugins: [require('prettier-plugin-tailwindcss')],
}

Obs: Recomendo reiniciar o projeto e recarregar a IDE que utilizar.