我有三个可能包含在一页上的尾风样式表。由于它们包括在内的方式，因此无法设置进口订单来管理优先级。是否可以告诉Tailwind或Postcs从另一个软件包中包含另一个样式表，并仅产生一个“主要”样式表？
我的项目是在monorepo中分为三个不同的软件包：
my-app
┕ tailwind.css
account-profile
┕ tailwind.css
ui
┕ tailwind.css
my-app 软件包是主要应用程序，以混音编写，并导入其他应用程序。 帐户profile 软件包在应用程序内提供了一个接口以处理帐户管理。 ui 软件包是 my-app 和 account-profile 使用的组件库。当您导航到应用程序中的帐户配置文件时，它将加载所有三个tailwind.css样式表。
这是一个要点，可以帮助解释为什么包括多个尾管样式出现问题：
带有 lg：block 类的div由于导入样式表的顺序而不会出现。
我提出的唯一解决方案是不起作用的，或者是不可持续的：
- @fullhuman/Postcss -purgecss-不起作用。
- Scoped CSS使用实验性且棘手。由于UI库将在各个地方使用，因此对这种情况不起作用。
- 在其中一个软件包中的尾风配置中，手动将任何必要的尾风类添加到
Safelist ，然后跳过导入其他两个。
- 将
account-profile 和 ui packages的内容路径添加到 my-app ，即：
content: [
...,
"../account-profile/**/*.{ts,tsx}$",
"../ui/**/*.{ts,tsx}$"
]
I have three tailwind stylesheets that may be included on a single page. Due to the way they're included, it's not possible to set the import order to manage precedence. Is it possible to tell tailwind or postcss to include another stylesheet, from another package, and produce just one "main" stylesheet?
My project is in a monorepo split into three different packages:
my-app
┕ tailwind.css
account-profile
┕ tailwind.css
ui
┕ tailwind.css
The my-app package is the main application, written in Remix, and it imports the others. The account-profile package provides an interface inside the application to handle account management. The ui package is a component library used by both my-app and account-profile. When you navigate to the account profile in the application, it would load all three tailwind.css stylesheets.
Here's a gist to help explain why including multiple tailwind stylesheets causes problems: https://gist.github.com/WriteLock/10d2f632c9fa66e0d9dedfa291ed2f3a
The div with the lg:block class does not appear as it should because of the order that the stylesheets are imported.
The only solutions I've come up with either do not work or are not sustainable:
- @fullhuman/postcss-purgecss - Does not work across packages.
- Scoped CSS is experimental and tricky to use. Since the UI library will be used in various places, it wouldn't work for that case.
- Manually add any necessary tailwind classes to the
safelist in the tailwind config in one of the packages, and skip importing the other two.
- Add the content paths for
account-profile and ui packages to the tailwind config in my-app, i.e.:
content: [
...,
"../account-profile/**/*.{ts,tsx}quot;,
"../ui/**/*.{ts,tsx}quot;
]
发布评论