Tailwind 的 Create-React-App 速查表

2025-06-04

Tailwind 的 Create-React-App 速查表

更新于 2020-02-29

  1. 替换concurrently为npm-run-all
  2. 修复初始空页面加载 -sleep 5在 package.json 中添加。

基于https://github.com/billimarie/simple-react-tailwind-tutorial

目录

  1. 安装 DEV 依赖项
  2. 创建 Tailwind 配置文件
  3. 为 Tailwind 配置 PostCSS
  4. 创建 Tailwind 文件
  5. 创建 NPM 脚本
  6. 导入 Tailwind CSS 输出

1. 安装 DEV 依赖项

# yarn
yarn add -D @fullhuman/postcss-purgecss autoprefixer npm-run-all cross-env cssnano postcss-cli purgecss tailwindcss
# npm
npm i -D @fullhuman/postcss-purgecss autoprefixer npm-run-all cross-env cssnano postcss-cli purgecss tailwindcss
Enter fullscreen mode Exit fullscreen mode

2.创建 Tailwind 配置文件

npx tailwind init tailwind.config.js
Enter fullscreen mode Exit fullscreen mode

3. 为 Tailwind 配置 PostCSS

  1. postcss.config.js在项目根目录中创建一个文件。
# bash
touch postcss.config.js
# Powershell
new-item postcss.config.js
Enter fullscreen mode Exit fullscreen mode
  1. 配置 Post CSS 以与 Tailwind 配合使用
    1. @fullhuman/postcss-purgecss - 使用“purgecss”对未使用的 CSS 进行 Tree-shaking
    2. autoprefixer - 添加浏览器特定的前缀，例如-webkit/-o/-moz
    3. cssnano - 压缩 CSS 以减少包大小
const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./public/**/*.html"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
})

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    // Purge and minify CSS only production builds only
    ...(process.env.NODE_ENV === "production"
      ? [purgecss, require("cssnano")]
      : []),
  ],
}
Enter fullscreen mode Exit fullscreen mode

4. 创建 Tailwind 文件

创建文件./src/styles/tailwind.css。

# bash
mkdir -p ./src/styles/ && touch ./src/styles/tailwind.css
# Powershell
new-item ./src/styles/tailwind.css -ItemType File -Force
Enter fullscreen mode Exit fullscreen mode

添加以下 Tailwind 实用程序

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

5.创建NPM脚本

package.json脚本。

  1. build:css- 将 Tailwind 转换为 CSS
  2. watch:css- 观察 Tailwind 的变化并编写 CSS
  3. env:dev/prod- 为开发或生产模式设置环境变量
  4. react-scripts:start：5 秒后启动，以防止初始页面为空
  5. react-scripts:build：创建可用于生产的 bundle
  6. start- 观察 Tailwind 的变化并启动 CRA
  7. build- 构建 Tailwind 和 CRA 站点的生产版本
"scripts": {
  "build:css": "postcss src/styles/tailwind.css -o src/styles/index.css",
  "watch:css": "postcss src/styles/tailwind.css -o src/styles/index.css --watch",
  "env:dev": "cross-env NODE_ENV=development",
  "env:prod": "cross-env NODE_ENV=production",
  "react-scripts:start": "sleep 5 && react-scripts start",
  "react-scripts:build": "react-scripts build",
  "start": "run-p env:dev watch:css react-scripts:start",
  "build": "run-s env:prod build:css react-scripts:build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
Enter fullscreen mode Exit fullscreen mode

6. 导入 Tailwind CSS 输出

  1. 前往./src/index.js
  2. 替换import './index.css';为import './styles/index.css';

资源

  1. 演示存储库 - https://github.com/dance2die/template.tailwind.cra
    • 通过关注此帖子创建
  2. CodeSandbox 模板 - https://codesandbox.io/s/create-react-app-tailwind-oqvyu
    • 你可以使用这个来 fork 并尝试一下 Tailwind + React :)

图片来源：印刷机单张送纸装置专利模型

文章来源：https://dev.to/dance2die/tailwind-for-create-react-app-cheat-sheet-24ol
Devto 翻译
PREV
完整的 JSON 教程 – 快速学习 JSON
NEXT
使用 React Router 在 Netlify 上找不到页面