我还是个新手,但有些事情让我很困惑.

让我们来运行一个场景:

Team A

  • 使用TailwinCSS(按钮、窗体、对话框等)构建UI组件库
  • 发布NPM包,其中导出index.tstheme/tailwind.css

Team B

  • npm install A队图书馆.将theme/tailwind.css导入他们的应用程序main.ts(入口点).

在这一点上,他们的main.ts应该已经

import { Button } from '@team-a/ui`
import '@team-a/ui/theme/tailwind.css` // tailwind classes coming from Team A
import `./theme/main.css` // tailwind CSS global file belonging to Team B

此时,在头部的<style>个标记中,我们将有来自团队A和团队B的类,污染相同的全局命名空间.

你如何绕过这个问题?

推荐答案

有几种方法可以避免这种情况,但如果两个团队都使用tailwind ,应该不会有任何问题.除非您具有例如覆盖:根目录下的自定义属性的自定义CSS.

无论如何,这里有几种方法可以避免冲突的CSS样式.

  1. @layers
  2. 将CSS的范围设置为仅应用于特定标记及以下标记.这是一个棘手的问题,通常框架会处理它,与CSS modulesreact ,Angular 与视图封装,但它可能与postcss或sass.
  3. Prefix the tailwind config与每个团队唯一的字符串,如果他们建立单独的tailwind 输出css.

Css相关问答推荐

创建始终为剪辑元素的300%高度并左对齐的圆形剪辑路径

响应的Megamenu位置css

测试响应式设计:手动拖动浏览器窗口与使用设备工具栏

具有共享的自动调整列宽的多个 CSS 网格

如何更改导航栏标题中链接的文本 colored颜色 和导航丸中的链接(在shiny 的应用程序中)?

通过 CSS 中的媒体查询更改站点的页面大小

根据选项 colored颜色 更改 Select 文本 colored颜色

最多 2 行的 Flex 水平滚动

为什么这个绝对定位的 ::after 伪元素会崩溃,除非父级有过滤器?

通过css修改样式shadowroot元素

CSS Slanding Div 边缘在图像上

带有图像的 CSS 网格在 Firefox 中表现不同

如何为使用jsTreeR拖入层次 struct node 的元素添加顺序编号?

具有自动调整大小的自动填充行的 CSS 网格

如何在 CSS Grid 布局中指定行高?

表格的边框半径没有按预期工作

BEM 块、命名和嵌套

在固定高度的输入字段中垂直对齐文本而不显示:表格或填充?

如何在 html/css 中的图像旁边垂直居中文本?

如何从标题中删除粗体?