Tailwind CSS

Tailwind CSS 是一个 CSS 框架，可让您在不离开 HTML 的情况下快速构建现代网站。

快速开始

如果您更喜欢使用模板，本指南将介绍如何构建此 Tailwind CSS + Turborepo 模板。

终端

pnpm dlx create-turbo@latest -e with-tailwind

指南

本指南适用于 Tailwind CSS v4。

创建单仓库

如果您没有现有项目，请使用 create-turbo 创建一个新的单仓库。

终端

pnpm dlx create-turbo@latest

将 Tailwind CSS 添加到您的应用程序

按照 Tailwind CSS 的指南为您的前端框架设置 Tailwind CSS。

完成后，您可以开始将您的 UI 包集成到应用程序中。

创建共享的 Tailwind CSS 配置包

首先，构建一个包含四个文件的内部包。

此 package.json 安装 Tailwind CSS，以便我们可以创建共享样式文件并将其导出到存储库的其余部分。

./packages/tailwind-config/package.json

{
  "name": "@repo/tailwind-config",
  "version": "0.0.0",
  "type": "module",
  "private": true,
  "exports": {
    ".": "./shared-styles.css",
    "./postcss": "./postcss.config.js"
  },
  "devDependencies": {
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.5"
  }
}

创建 UI 包

现在您可以构建要在应用程序之间共享的组件。

如需完整示例，请访问 Tailwind CSS 示例中 @repo/ui 包的源代码。以下是您的 Tailwind CSS 设置所需的文件。

package.json 安装包的依赖项，设置开发和构建环境的脚本，并标记包的导出。

./packages/ui/package.json

{
  "exports": {
    "./styles.css": "./dist/index.css",
    "./*": "./dist/*.js"
  },
  "scripts": {
    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
    "build:components": "tsc",
    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
    "dev:components": "tsc --watch"
  },
  "devDependencies": {
    "@repo/tailwind-config": "workspace:*",
    "@tailwindcss/cli": "^4.1.5",
    "@tailwindcss/postcss": "^4.1.5",
    "autoprefixer": "^10.4.20",
    "tailwindcss": "^4.1.5"
  }
}

须知：

上面，我们仅包含了与设置 Tailwind 相关aneous 的代码。完整的 package.json 在此处。

在应用程序中使用 UI 包

将您创建的包安装到您的应用程序中。

终端

pnpm add @repo/ui @repo/tailwind-config --save-dev --filter=@repo/ui --filter=web

然后，配置应用程序中的文件，以便 UI 包中的样式能够反映在应用程序中。

./apps/web/app/globals.css

@import 'tailwindcss';
@import '@repo/tailwind-config';