Tailwind CSS

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

¥Tailwind CSS is a CSS framework that allows you to rapidly build modern websites without ever leaving your HTML.

快速入门

¥Quickstart

如果你希望使用模板，本指南将介绍如何构建这个 Tailwind CSS + Turborepo 模板。

¥If you'd rather use a template, this guide is walking throw how to build this Tailwind CSS + Turborepo template.

Terminal

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

指南

¥Guide

This guide is for Tailwind CSS v4.

创建 monorepo

¥Create a monorepo

如果你没有现有项目，请使用 create-turbo 创建一个新的 monorepo：

¥If you don't have an existing project, use create-turbo to create a new monorepo:

Terminal

pnpm dlx create-turbo@latest

将 Tailwind CSS 添加到你的应用

¥Add Tailwind CSS to your application

遵循 Tailwind CSS 指南为你的前端框架设置 Tailwind CSS。

¥Follow Tailwind CSS's guides to set up Tailwind CSS for your frontend framework.

完成后，你可以开始将 UI 包引入应用。

¥Once completed, you can start working on bringing your UI package into the applications.

创建一个共享的 Tailwind CSS 配置包

¥Create a shared Tailwind CSS configuration package

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

¥First, build an Internal Package with four files:

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

¥This package.json installs Tailwind CSS so we can create the file shared styles and export for the rest of the repository.

./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 包

¥Create the UI package

你现在可以构建组件以共享到你的应用。

¥You can now build the components to share to your applications.

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

¥For a full example, visit the source code for @repo/ui package in the Tailwind CSS example. The files required for your Tailwind CSS setup are below.

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

¥The package.json installs the dependencies for the package, sets up scripts for development and build environments, and marks the exports for the package.

./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"
  }
}

Good to know:

以上，我们仅包含与设置 Tailwind 相关的代码。完整的 package.json 文件是此处。

¥Above, we've only included the code related to setting up Tailwind. The full package.json is here.

在应用中使用 UI 软件包

¥Use the UI package in an application

将你创建的包安装到你的应用中。

¥Install the packages you've created into your application.

Terminal

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

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

¥Then, configure the files in your application so the styles from the UI package are reflected in the application.

./apps/web/app/globals.css

@import 'tailwindcss';
@import '@repo/tailwind-config';
@import '@repo/ui/styles.css';