Turborepo、SvelteKit 和 Tailwind 的 monorepo 中的样式问题

Question

I\xe2\x80\x99ve 使用 Turborepo 创建了一个 monorepo，其中包含 2 个 SvelteKit 应用程序和 2 个包：一个组件库（也基于 SvelteKit）和一个配置包。

\n

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

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

\n

我的问题是，从组件库导入的组件在app1中正确显示，但app2中的 Tailwind 类似乎存在问题。有些课程存在，但有些则不存在。I\xe2\x80\x99m 在 JIT 模式下使用 Tailwind。

\n

使用的包的版本：

\n

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

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

\n

Answer 1

事实证明（2 个月后），问题在于 Tailwind 是单独安装在每个应用程序中的。您应该在monorepo 的根目录下安装 Tailwind（以及 PostCSS 和 Autoprefixer）。配置文件可以保留在单独的包中，并且可以从那里导入。

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

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

包中的两个tailwind.config.cjs文件app如下：

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

另外，不要忘记将main 中的路径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}'
]

因此，这意味着无论哪个应用程序导入配置文件，Tailwind 都应该查看component-library包和当前应用程序源文件。