如何在TurboRepo类Monorepo中安装TailwindCSS及问题解决

以下是我在Turbo Monorepo中配置TailwindCSS时遇到问题的解决过程，分享给大家：

初始操作流程 #

• 创建Monorepo项目：

npx create-turbo@latest

• 进入项目子应用目录并执行初始化命令：

cd apps/web  // 你的项目目录需包含该子应用路径
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

遇到的问题 #

执行上述命令后，无法成功创建tailwind.config.json文件

若成功创建该配置文件，可参考以下示例配置来正常使用TailwindCSS：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

解决步骤 #

1. 进入apps/web目录，手动编辑package.json，在devDependencies中添加以下依赖：

"devDependencies": {
  "tailwindcss": "^3.0.0",
  "postcss": "^8.0.0",
  "autoprefixer": "^10.0.0"
}

2. 执行安装命令：

npm install

3. 完成依赖安装后，重新执行以下命令即可成功创建配置文件：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

内容的提问来源于stack exchange，提问作者Dksinha