Executando verificação de segurança...
1
renanmagazord
1 min de leitura ·

[help] problemas com tailwind e hierarquia de css

Ola, tudo certo com voces?

Tenho uma aplicação onde ela roda em php, html, css e js. Aplico o css via arquivo e importo e tals. Porem recentemente fiz alguns componentes em React em build, e chamo eles exemplo new Footer(props). Ate ai ta tudo normal, porem nesses projetos em react eu uso somente tailwind, e no postcss tenho um prefixo com .ra-footer por exemplo, que no caso restringe para o tailwind aplica os estilos somente a este componente footer, mas, juntamente disso tenho mais componentes feito em React separados em demais builds e chamo igual o footer, new Header(), new Produto() por exemplo, e tive que colocar o prefixo para nao confundir o tailwind com cada projeto e estilo a aplicar.

Agora vem a sacada, eu tenho um recurso que permite ao usuario adicionar estilos, porem este estilo vai via tag chumbado dentro de um html escondido. E depois que montei meus componentes com tailwind esse estilos via tag style estao com menos prioridade e acabam nao aplicando os estilos corretamente, basicamente tem que ficar indo em estilo por estilo e tacar um !important.

Alguem saberia como resolver isso, ou alguma config a ser usada no tailwind, literalmente nao achei nada na documentação deles sobre.

Carregando publicação patrocinada...
1
mateusarcee

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.

1