主页 / coding / 问题 / 79430795
Accepted
leosole
Asked: 2025-02-12 01:08:19 +0800 CST

在特定组件内使用时，Tailwind 断点会被覆盖

  • 772

背景：我正在构建一些库来帮助我构建带有微前端的门户。我有一个 UI 库（带有 UI 组件）、一个 Commons 库（使用 UI，具有所有微前端的共享组件）、一个渲染器库（使用 UI，用于渲染 strapi 数据）。它们都使用 tailwind css。

问题：当我使用公共库中接受子组件的组件时，用作子组件的组件的断点不起作用。如果我在公共组件之外使用相同的组件，断点就会起作用。例如：

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

<ComponentWithBreakpoint /> // breakpoints work

查看开发工具，我可以看到未应用断点的类（来自layout.css的lg：flex-row）：

在此处输入图片描述

flex-col 类也来自不同的文件（page.css）

这些组件包括：

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 个回答

  1. Best Answer

    它在原生 TailwindCSS 中有效，因为 TailwindCSS 按照正确的顺序将类添加到结果中。

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

    现在我将向您展示如果我意外创建了更严格的规则会发生什么。

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

    因此，您所描述的问题之所以发生，是因为您的代码中某个地方的.flex-col是硬编码的（但在 TailwindCSS 生成的类之后已修复）。因此，无论 TailwindCSS 如何添加.lg:flex-row，它都会被.flex-col其后的 覆盖。

    我将向您展示当常规flex-col出现在 之后时没有 TailwindCSS 会发生什么情况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>

    如果按照正确的顺序声明类，会发生什么情况：

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

    结论：添加类的顺序很重要。默认情况下，TailwindCSS 会完美地添加其生成的类，但正如您从我的示例中看到的那样，您自己的 CSS 或 UI 库都可以重新声明.flex-col，使其比 TailwindCSSlg:flex-row先前声明的更强大。

    你现在的任务是检查在哪里以及为什么重新声明flex-col。如果无法避免重新声明，则将此 CSS 添加到组件：

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

    或者使用 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>

    或者使用 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

相关问题