Início / coding / Perguntas / 79430795
Accepted
leosole
Asked: 2025-02-12 01:08:19 +0800 CST

Pontos de interrupção do Tailwind substituídos quando usados ​​dentro de um componente específico

  • 772

Contexto: Estou construindo algumas bibliotecas para me ajudar a construir um portal com microfrontends. Tenho uma biblioteca ui (com componentes ui), uma biblioteca commons (usa ui, tem componentes compartilhados para todos os microfrontends), uma biblioteca renderer (usa ui, é usada para renderizar dados strapi). Todas elas usam tailwind css.

Problema: Quando eu uso um componente da biblioteca commons que aceita filhos, os breakpoints do componente usado como filho não estão funcionando. Se eu usar o mesmo componente fora do componente commons, os breakpoints funcionam. Por exemplo:

<CommonsComponent>
  <ComponentWithBreakpoint /> // breakpoints do not work
</CommonsComponent>

<ComponentWithBreakpoint /> // breakpoints work

Olhando as ferramentas de desenvolvimento, posso ver que a classe com o ponto de interrupção não está sendo aplicada (lg:flex-row de layout.css):

insira a descrição da imagem aqui

A classe flex-col também vem de um arquivo diferente (page.css)

Os componentes são:

const CommonsComponent = ({children}: {children: React.ReactNode}) => {
return (<div className="flex flex-col gap-4 w-full lg:w-[70%]">
  {children}
</div>)
} //from the commons library

const ComponentWithBreakpoint = () => {
return (
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2 w-full">
  //content
</div>
)} // from one of the microfrontends
reactjs

1 respostas

  1. Best Answer

    Funciona no TailwindCSS nativo porque o TailwindCSS adiciona as classes ao resultado na ordem correta.

    <script src="https://cdn.tailwindcss.com"></script>

* Working<br>
Click the "Full page" button for the lg view
<div class="flex flex-col lg:flex-row">
  <div>1.</div>
  <div>2.</div>
</div>

<div class="flex lg:flex-row flex-col">
  <div>1.</div>
  <div>2.</div>
</div>

    Agora vou mostrar o que acontece se eu acidentalmente criar uma regra mais forte.

    <script src="https://cdn.tailwindcss.com"></script>

<style>
.flex-col {
  flex-direction: column;
}
</style>

* Not Working<br>
Click the "Full page" button for the lg view
<div class="flex flex-col lg:flex-row">
  <div>1.</div>
  <div>2.</div>
</div>

<div class="flex lg:flex-row flex-col">
  <div>1.</div>
  <div>2.</div>
</div>

    Então o problema que você descreveu ocorre porque em algum lugar do seu código, a .flex-colé codificado (mas corrigido após as classes geradas pelo TailwindCSS). Portanto, não importa como o TailwindCSS adicione o .lg:flex-row, ele será substituído pelo .flex-colque vem depois dele.

    Vou mostrar o que acontece sem o TailwindCSS quando um regular flex-colvem depois de lg:flex-row.

    <style>
/* Generated by TailwindCSS */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
@media (min-width: 1024px) { 
  .lg\:flex-row {
    flex-direction: row;
  }
}
/* Added by you or your UI libary or etc. */
.flex-col {
  flex-direction: column;
}
</style>

* Not Working<br>
Click the "Full page" button for the lg view
<div class="flex flex-col lg:flex-row">
  <div>1.</div>
  <div>2.</div>
</div>

<div class="flex lg:flex-row flex-col">
  <div>1.</div>
  <div>2.</div>
</div>

    E o que acontece se as classes forem declaradas na ordem correta:

    <style>
/* Generated by TailwindCSS */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
@media (min-width: 1024px) { 
  .lg\:flex-row {
    flex-direction: row;
  }
}
/* Added by you or your UI libary or etc. */
.flex-col {
  flex-direction: column;
}
@media (min-width: 1024px) { 
  .lg\:flex-row {
    flex-direction: row;
  }
}
</style>

* Working<br>
Click the "Full page" button for the lg view
<div class="flex flex-col lg:flex-row">
  <div>1.</div>
  <div>2.</div>
</div>

<div class="flex lg:flex-row flex-col">
  <div>1.</div>
  <div>2.</div>
</div>

    Conclusão: A ordem em que as classes são adicionadas importa. Por padrão, o TailwindCSS adiciona suas classes geradas perfeitamente, mas como você pode ver nos meus exemplos, tanto seu próprio CSS quanto a biblioteca de UI podem re-declarar o .flex-col, tornando-o mais forte do que o lg:flex-rowdeclarado anteriormente pelo TailwindCSS.

    Sua tarefa agora é verificar onde e por que você está redeclarando o flex-col. Se não for possível evitar a redeclaração, adicione este CSS ao componente:

    .flex-col {
  flex-direction: column;
}
@media (min-width: 1024px) {
  .lg\:flex-row {
    flex-direction: row;
  }
}

    ou com a sintaxe Tailwind CSS v3:

    .flex-col {
  flex-direction: column;
}
@screen lg {
  .lg\:flex-row {
    flex-direction: row;
  }
}


    <script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
/* Generated by TailwindCSS */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
@screen lg {
  .lg\:flex-row {
    flex-direction: row;
  }
}
/* Added by you or your UI libary or etc. */
.flex-col {
  flex-direction: column;
}
@screen lg {
  .lg\:flex-row {
    flex-direction: row;
  }
}
</style>

* Working<br>
Click the "Full page" button for the lg view
<div class="flex flex-col lg:flex-row">
  <div>1.</div>
  <div>2.</div>
</div>

<div class="flex lg:flex-row flex-col">
  <div>1.</div>
  <div>2.</div>
</div>

    ou com a sintaxe Tailwind CSS v4:

    .flex-col {
  flex-direction: column;
}
.lg\:flex-row {
  @variant lg {
    flex-direction: row;
  }
}


    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
/* Generated by TailwindCSS */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.lg\:flex-row {
  @variant lg {
    flex-direction: row;
  }
}
/* Added by you or your UI libary or etc. */
.flex-col {
  flex-direction: column;
}
.lg\:flex-row {
  @variant lg {
    flex-direction: row;
  }
}
</style>

* Working<br>
Click the "Full page" button for the lg view
<div class="flex flex-col lg:flex-row">
  <div>1.</div>
  <div>2.</div>
</div>

<div class="flex lg:flex-row flex-col">
  <div>1.</div>
  <div>2.</div>
</div>

    • 1

relate perguntas