使用 Tailwind CSS 设置 create-react-app

2025-06-10

使用 Tailwind CSS 设置 create-react-app

最近，我很喜欢使用实用优先的CSS 框架来编写前端代码，而不是像Bootstrap和Bulma这样的功能齐全的工具包。它可以帮助我立即构建和自定义页面组件，而无需从头开始编写自己的 CSS。在看到Tailwind CSS受到不同社区和平台的关注后，我决定在我的一个个人项目中尝试一下。它让页面样式设计变得更有趣，因为它非常易于使用，而且文档非常直观。

由于它对组件友好，我尝试在我的后续项目中使用 create-react-app 来了解它与单页应用程序的契合程度。😎

现在，我将帮助您使用 Tailwind CSS 设置您自己的 create-react-app 项目。让我们开始吧！

首先，让我们使用 create-react-app 创建一个新的 ReactJS 项目。

npx create-react-app your-app-name
Enter fullscreen mode Exit fullscreen mode

接下来，我们可以轻松地在新的 create-react-app 项目中安装 Tailwind CSS 模块，而无需接触实际的脚手架。只需在 npm 上运行以下命令：

npm install tailwindcss --save-dev
Enter fullscreen mode Exit fullscreen mode

安装 Tailwind CSS 后，我们必须使用以下命令生成易于访问且易于使用的 JavaScript 格式的配置文件：

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

您可以使用任何您喜欢的文件名，但将其命名tailwind.js为默认文件名是文档中的建议，通常最好遵循。

然后，按照文档的建议，我们将 Tailwind 作为PostCSS插件添加到我们的构建链中。通过以下方式安装这些对等依赖项：

npm install postcss-cli autoprefixer --save-dev
Enter fullscreen mode Exit fullscreen mode

之后，我们必须创建一个postcss.config.js文件，通过传递其中的路径将 Tailwind 添加为插件。

var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss('./path/to/your/tailwind.js'),
    require('autoprefixer'),
  ]
}
Enter fullscreen mode Exit fullscreen mode

您的tailwind.js配置postcss.config.js文件可以包含在目录的任何部分，但现在，我只是将其放在我的项目的根级别内。

接下来，我们需要创建一个入口点，以便能够在 CSS 中使用 Tailwind。在这种情况下，我总是遵循文档中的建议。

只需将以下代码复制并粘贴到tailwind.css项目/src目录或另一个自定义文件夹中名为 的新文件中，即可将静态样式和自定义样式与生成的样式区分开。在本例中，我创建了一个自定义/styles目录：

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/base";
 */
@tailwind base;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */
Enter fullscreen mode Exit fullscreen mode

粘贴此代码并保存文件后，我们现在将安装npm-run-all工具，以便并行或顺序运行 npm 脚本。这并非实际要求，但我强烈推荐它，尤其是对于 Windows 用户。此 CLI 工具可以帮助我们在跨平台上运行脚本。

npm install npm-run-all --save-dev
Enter fullscreen mode Exit fullscreen mode

接下来，我们需要配置package.json文件来构建 CSS 并启动本地的 create-react-app 服务器。该scripts部分现在看起来类似于以下内容：

"scripts": {
    "start": "npm-run-all --parallel watch:css start:react",
    "build": "npm-run-all build:css build:react",
    "build:css": "postcss src/styles/tailwind.css -o src/index.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/index.css -w",
    "start:react": "react-scripts start",
    "build:react": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
Enter fullscreen mode Exit fullscreen mode

我们现在可以npm start在 npm 中运行脚本来构建我们的文件并启动我们的服务器。

npm start
Enter fullscreen mode Exit fullscreen mode

最后，为了测试 Tailwind CSS 是否在你的组件中运行，我们只需导入生成的index.css文件并在我们的 JSX 中从 Tailwind 的文档中添加一个实用程序类，如下所示：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

const App = () => {
  return <div className="bg-blue-100">Hello World!</div>
};

ReactDOM.render(<App />, document.querySelector("#root"));
Enter fullscreen mode Exit fullscreen mode

这是它在浏览器上的样子！

Hello World 示例

这是使用Screely 制作的 300% 缩放屏幕截图。

好了！感谢阅读，希望我能够正确地介绍这个设置。😄

鏂囩珷鏉ユ簮锛�https://dev.to/nards_paragas/setup-create-react-app-with-tailwind-css-394e
Devto 翻译
PREV
如何在 React 中创建加载更多逻辑
NEXT
The common misconception about TypeScript