tailwind-css - 使用 Turborepo、SvelteKit 和 Tailwind 的 monorepo 中的样式问题

Question

我用 Turborepo 创建了一个 monorepo，其中包含 2 个 SvelteKit 应用程序和 2 个包:一个组件库(也基于 SvelteKit)和一个配置包。

root
|
|- packages
|   |- component-library
|   `- config
|
`- apps
    |- app1
    `- app2

config 包包含 Tailwind 和 PostCSS 配置文件，它们在组件库和两个应用程序中使用。

我的问题是从组件库导入的组件在app1中正确显示，但在app2中似乎与 Tailwind 类有问题.有些类存在，但有些不存在。我在 JIT 模式下使用 Tailwind。

使用包的版本:

"turbo": "^1.2.4",
"svelte": "^3.34.0",
"@sveltejs/kit": "1.0.0-next.316",
"tailwindcss": "3.0.23",

我什至不确定这是否是因为 SvelteKit，但如果有人有类似 Turborepo-SvelteKit-Tailwind 设置的经验，我将不胜感激。

Answer 1

事实证明，(2 个月后)，问题是 Tailwind 是单独安装在每个应用程序中的。您应该改为在 monorepo 的 root 安装 Tailwind(以及 PostCSS 和 Autoprefixer)。配置文件可以保留在单独的包中，并可以从那里导入。

所以我的根 package.json 现在是这样的:

"devDependencies": {
    "autoprefixer": "^10.3.4",
    "postcss": "^8.2.15",
    "tailwindcss": "^3.1.4",
    "turbo": "^1.3.1"
}

app 包中的 tailwind.config.cjs 文件如下:

module.exports = require('config/tailwind.config.cjs')

---

另外不要忘记在您的 ma​​in tailwind.config.cjs 中添加路径(例如:packages/config/tailwind.config .cjs) 到包含 Tailwind 类的文件。

我的有这个:

content: [
    '../../packages/component-library/src/**/*.{html,js,svelte,ts,svx}',
    './src/**/*.{html,js,svelte,ts,svx}'
]

So this means that no matter which app is importing the config file, Tailwind should look in the component-library package and the current app source files.