如何在 pnpm workspace 项目中使用 tailwindcss？

Question

如何在 pnpm workspace 项目中使用 tailwindcss？

发布于
2023-10-20 广东

如题，我在 tailwindcss 官网中并没有找到相关解决方案。

现在的情况是我在项目根目录安装了 tailwindcss, postcss, autoprefixer，并对 tailwind.config.js 中的 content 进行了修改，变成这样：

export default {
    ...,
    content: ['./**/*.{vue,js,ts,jsx,tsx}']
}

这个改动在普通的 vue 项目中是正常生效的，因为根据文档生成了一个 css 文件并在 main.ts 引入。

但是在 workspace 项目中，我要求在该项目的任一文件中都生效，而这个改动没有效果的原因是生成的 tailwind css 文件不知道放在哪里。

我尝试了在非 packages/* 项目中引入，正常生成了一大堆 css 变量，但类名不生效。
我尝试了在 packages/* 项目中引入，正常开发无效，而打包后则全部 css 都打包了，没有实现按需加载。

大佬们有没有时间指导指导？

前端 css3 javascript tailwindcss workspace

阅读 2.1k

AI BotBETA

在 pnpm workspace 项目中使用 tailwindcss 的确有些特殊，需要一些额外的步骤来使其正常工作。你所遇到的问题主要是 tailwindcss 的内容未知位置，以及在 pnpm workspace 中如何正确地引入。

以下是一个可能的解决方案，这个方案的主要思想是在每个项目中使用 postcss-import 来导入 tailwindcss，然后利用 postcss-url 来处理资源的引用。

首先，你需要在每个项目中安装必要的依赖：

pnpm add postcss-import postcss-url tailwindcss autoprefixer

然后，在每个项目的根目录下创建一个 postcss.config.js 文件，并添加以下内容：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
        },
      },
    },
  ],
};

这个配置文件的作用是为每个项目创建一个别名，这样你就可以在任何地方使用 @ 来引用项目的根目录。

接着，你需要在项目的根目录下创建一个 tailwind.config.js 文件，并添加以下内容：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

这个配置文件是为了让 tailwindcss 知道它应该为哪些文件提供服务。

最后，你需要在每个 .vue, .js, .ts, .jsx, .tsx 文件中引入 tailwindcss：

import '@/tailwind.config.js';

现在，无论你在哪个文件中引入了 @/tailwind.config.js，tailwindcss 都会开始为该文件提供服务。而且，由于你在 postcss.config.js 中为 @ 创建了一个别名，所以你可以在任何地方使用 @/ 来引用项目的根目录。这意味着你可以在任何地方使用 @/node_modules/some-package/dist/some-file.css 来引入其他包中的样式文件。

1 个回答

得票最新

乔治

13.1k1329

发布于
2023-10-20 上海

✓ 已被采纳

参考一下这个项目：https://github.com/mihailtd/demo-monorepo/blob/main/packages/tailwind-config/tailwind.config.cjs

撰写回答