最近，我一直在使用實(shí)用程序優(yōu)先的CSS框架而不是像Bootstrap和Bulma這樣的成熟工具包來編寫前端代碼，這很有趣。它可以幫助我立即構(gòu)建和自定義頁(yè)面組件，而不必從頭開始編寫自己的CSS。在看到Tailwind CSS從不同的社區(qū)和平臺(tái)獲得關(guān)注之后，我決定在我的一個(gè)個(gè)人項(xiàng)目中嘗試一下。它使樣式頁(yè)面更加有趣，因?yàn)樗子谑褂貌⑶椅臋n非常直觀。

由于它是組件友好的，因此我在帶有create-react-app的下一個(gè)項(xiàng)目中嘗試使用它，以了解它與單頁(yè)應(yīng)用程序的匹配程度。?

現(xiàn)在，我將幫助您使用Tailwind CSS設(shè)置自己的create-react-app項(xiàng)目。讓我們開始吧！

首先，讓我們使用create-react-app創(chuàng)建一個(gè)新的ReactJS項(xiàng)目。

npx create-react-app your-app-name

接下來，我們可以輕松地在以后的新的create-react-app項(xiàng)目上安裝Tailwind CSS模塊，而無(wú)需接觸實(shí)際的腳手架。只需在npm上運(yùn)行以下命令：

npm install tailwindcss --save-dev

安裝Tailwind CSS之后，我們將不得不生成我們的配置文件，該文件采用javascript格式，可以通過以下命令訪問并易于使用：

npx tailwind init tailwind.js

您可以使用自己喜歡的任何文件名，但將其命名tailwind.js為默認(rèn)文件名是文檔中的建議，通常很容易遵循。

然后，按照文檔的建議，我們將在構(gòu)建鏈中將Tailwind添加為PostCSS插件。通過以下方式安裝這些對(duì)等依賴項(xiàng)：

npm install postcss-cli autoprefixer --save-dev

之后，我們必須創(chuàng)建一個(gè)postcss.config.js文件，在其中通過在其中傳遞路徑將Tailwind添加為插件。

var tailwindcss = require('tailwindcss');

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

您的文件tailwind.js和postcss.config.js配置文件可以包含在目錄的任何部分，但是現(xiàn)在，我只是將其放在項(xiàng)目的根目錄下。

接下來，我們必須創(chuàng)建一個(gè)入口點(diǎn)，以便能夠在CSS中使用Tailwind。在這種情況下，我總是使用文檔中的建議。

只需將下面的代碼復(fù)制并粘貼到tailwind.css位于項(xiàng)目/src目錄或其中的另一個(gè)自定義文件夾中的新文件中，即可將靜態(tài)和自定義樣式與生成的樣式分開。就我而言，我創(chuàng)建了一個(gè)自定義/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";
 */

粘貼此代碼并保存文件后，我們現(xiàn)在將安裝npm-run-all為以并行或順序運(yùn)行npm腳本的工具。這不是實(shí)際要求，但我強(qiáng)烈建議您特別向Windows用戶推薦。此CLI工具有幫助，因此我們可以跨平臺(tái)運(yùn)行腳本。

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

接下來，我們將必須配置package.json文件以構(gòu)建CSS并啟動(dòng)本地create-react-app服務(wù)器。該scripts部分現(xiàn)在看起來與此類似：

"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"
  },

現(xiàn)在，我們將能夠npm start在npm中運(yùn)行腳本以構(gòu)建文件并啟動(dòng)服務(wù)器。

npm start

最后，要測(cè)試Tailwind CSS是否在您的組件中運(yùn)行，我們只需導(dǎo)入生成的index.css文件，并從JSX中的Tailwind文檔中添加一個(gè)實(shí)用工具類，如下所示：

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"));

這是它在瀏覽器上的外觀！

這是一個(gè)包裝！感謝您的閱讀，希望我能夠正確介紹此設(shè)置。