Uma possível solução é usar a opção important no arquivo de configuração do Tailwind (tailwind.config.js) para desativar a prioridade dos estilos do Tailwind. Isso permitirá que os estilos personalizados sejam aplicados corretamente.

Aqui está um exemplo de como você pode fazer isso:

module.exports = {
  // ...
  important: false,
  // ...
}

Isso desativa a prioridade dos estilos do Tailwind, permitindo que os estilos personalizados sejam aplicados corretamente.

Outra opção é usar a classe !important nos estilos personalizados, como você mencionou. No entanto, isso pode ser trabalhoso e não é uma solução muito elegante.

Uma terceira opção é criar um arquivo de CSS separado para os estilos personalizados e importá-lo no arquivo HTML após o arquivo de CSS do Tailwind. Isso garantirá que os estilos personalizados sejam aplicados após os estilos do Tailwind.