Limitações Comparativas entre CSS, Bootstrap e TailwindCSS

Todas as três opções são excelentes, mas elas apresentam suas limitações. Eu vou apresentar e tentar resumir as principais limitações e também o que na minha opinião é o melhor uso de cada caso.

CSS puro:

Prós:

Alta customização:

Excelente para projetos pequenos que requerem um toque bem personalizado e cheio de pequenos detalhes.

Contras:

Tempo de desenvolvimento:

Por ser muito elevado o nível de customização, infelizmente tende a se tornar cada vez mais complexo o código css, para isso é muito comum o controle do código css em arquivos separados, e ainda assim caso boas práticas não sejam utilizadas as florestas de arquivos também tendem a se tornar bem confusas aumentando ainda mais o tempo de desenvolvimento.

Uso:

Projetos Pequenos, ou pequenos ajustes com alta necessidade de customização

Bootstrap:

Prós:

Rápido e simples:

O bootstrap é de fácil instalação e de fácil implementação, a velocidade com que você estrutura com bootstrap é muito maior comparada com o css puro. Se você precisa desenvolver um projeto pequeno com pouca customização, como um MVP (Produto Mínimo Viável), ou mesmo um protótipo, o Bootstrap é o cara, ele vai deixar as coisas com visual agradável com velocidade, e você poderá focar em outras funcionalidades.

Contras:

Baixo nível de customização:

Apesar de ser muito rápido de instalar e usar, o bootstrap é bem engessado, e do ponto de vista do Designer manter somente o bootstrap pode causar um desconforto de mesmisse, já que os espaçamentos, as cores, as estruturações, são pré definidas.

Uso:

MVPs, Protótipos, com baixa necessidade de customização.

TailwindCSS:

Prós:

Rápida Implementação e alta customização

O tailwind é um framework que pega o melhor do Bootstrap e expande isso, aumentando o nível de customização, do ponto de vista do designer é maravilhoso, ele vai entregar resultados personalizados em um pouco espaço de tempo. A possibilidade de escolher a cor de um elemento, ou espacamento e tamanho, direto no HTML é extremamente libertador. É muito indicado em projetos grandes, e que precisam de entregas rápidas e personalizadas. Se o MVP está definido o melhor é ir com o TailwindCSS.

Contras:

Implementação complexa:

Não é muito intuitiva a instalação do Tailwind então para quem está começando pode perder algum tempo configurando o ambiente até conseguir trabalhar.

O problema do codigo sujo:

Na verdade, isso não é um problema da ferramenta, o mesmo pode acontecer com o CSS puro ou do Bootstrap, mas o desenvolvedor utilizando boas práticas consegue manter o HTML limpo ao mesmo tempo que bem estruturado, contudo o tailwind de fato por ter mais opções de customização acaba por se tornar mais sujo que os demais.

Nem tudo são flores:

Nem toda customização será possível com o Tailwind, às vezes é necessário recorrer ao velho e bom CSS para resolver alguns probleminhas.

Uso:

Projetos Grandes com alta necessidade de customização.

Considerações finais:

Nada impede de usar CSS puro Junto com os Frameworks!

Sabendo que o Bootstrap tem pouco espaço para customização e o Tailwind também tem seus limites, ou seja, nem tudo ele consegue fazer, nesses casos, o conhecimento em CSS é mais do que necessário, para fazer um bom trabalho. Assim, recorrentemente alguns detalhes eu preciso fazer utilizando o velho e bom CSS, um pouco mais lento, mas poderoso, e com a ajuda do Framework, muito menos código para dar manutenção.

A questão do código sujo no TailwindCSS

Na verdade, isso é facilmente mitigado por recursos que o Tailwind oferece, como por exemplo, componentização de classes:

Temos esse trecho de código:

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

.btn-blue {
  @apply bg-blue-500 text-white rounded-md hover:bg-blue-600 transition ease-in-out delay-150;
}

E o HTML fica assim:

    <button class="btn-blue">...</button>

E quanto maior for ficando seu Tailwind, em vez de colocar no HTML, coloque no componente.

Impossibilidade de uso de mais de uma UI Lib ou Framework

Outro ponto que deve ser levado em conta é que não se pode usar o Tailwind com Bootstrap por exemplo, pois eles costumam compartilhar as mesmas classes. Por isso, se o projeto tem tailwind, não inventa de trazer bootstrap porque é mais fácil, ou vice-versa, trazer tailwind porque você quer mais customização. Um vai atrapalhar o outro. Se o projeto já passou do período de MVP e prototipação, é recomendado começar o front do zero com TailwindCSS, se você não quer este "retrabalho", comece direto com ele.