reactjsnext.jstailwind-css

Tailwind breakpoints overwritten when used inside specific component

Context: I'm building some libraries to help me build a portal with microfrontends. I have a ui library (with ui components), a commons library (uses ui, has shared components for all microfrontends), a renderer library (uses ui, is used for rendering strapi data). All of them uses tailwind css.

Problem: When I use a component from the commons library that accepts children, the breakpoints from the component used as child are not working. If I use the same component outside the commons component, the breakpoints work. For example:

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

<ComponentWithBreakpoint /> // breakpoints work

Looking at the dev tools, I can see the class with the breakpoint not being applied (lg:flex-row from layout.css):

enter image description here

The flex-col class is also coming from a different file (page.css)

The components are:

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
Solution

  • It works in native TailwindCSS because TailwindCSS adds the classes to the result in the correct order.

    <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>

    Now I'll show you what happens if I accidentally create a stronger rule.

    <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>

    So the issue you described occurs because somewhere in your code, a .flex-col is hardcoded (but fixed after the classes generated by TailwindCSS). Therefore, no matter how TailwindCSS adds the .lg:flex-row, it will be overridden by the .flex-col that comes after it.

    I'll show you what happens without TailwindCSS when a regular flex-col comes after 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>

    And what happens if the classes are declared in the correct order:

    <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>

    Conclusion: The order in which classes are added matters. By default, TailwindCSS adds its generated classes perfectly, but as you can see from my examples, either your own CSS or the UI library can re-declare the .flex-col, making it stronger than the lg:flex-row previously declared by TailwindCSS.

    Your task now is to check where and why you're re-declaring the flex-col. If it's not possible to avoid re-declaring it, then add this CSS to the component:

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

    or with Tailwind CSS v3 syntax:

    .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>

    or with Tailwind CSS v4 syntax:

    .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>