使用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

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

npm install tailwindcss --save-dev

安装Tailwind CSS之后，我们将不得不生成我们的配置文件，该文件采用javascript格式，可以通过以下命令访问并易于使用：

npx tailwind init tailwind.js

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

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

npm install postcss-cli autoprefixer --save-dev

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

var tailwindcss = require('tailwindcss');

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

您的文件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";
 */

粘贴此代码并保存文件后，我们现在将安装npm-run-all为以并行或顺序运行npm脚本的工具。这不是实际要求，但我强烈建议您特别向Windows用户推荐。此CLI工具有帮助，因此我们可以跨平台运行脚本。

npm install npm-run-all --save-dev

接下来，我们将必须配置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"
  },

现在，我们将能够npm start在npm中运行脚本以构建文件并启动服务器。

npm start

最后，要测试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"));

这是它在浏览器上的外观！

这是一个包装！感谢您的阅读，希望我能够正确介绍此设置。