【譯】請拿走 2021 年在 React 項目中使用 Tailwind CSS 的最佳安裝指南

這是一個快速教程，教您如何爲您的 React 項目使用 Tailwind CSS。

作者：Kevin Sheehan
譯：https://medium.com/swlh/setting-up-tailwind-css-in-your-react-project-8a52f3b58602

第 1 步：創建項目

$ npx create-react-app project-name
$ cd project-name

第 2 步：安裝 tailwind 依賴

# Using npm
$ npm install tailwindcss --save-dev

# Using Yarn
$ yarn add tailwindcss --dev

第 3 步：設置 PostCSS 和 Autoprefixer

運行下面的命令去創建 tailwind.js 文件，這是 tailwind 的默認配置文件。

$ npx tailwind init tailwind.js --full

然後安裝 PostCSS 去處理轉換 CSS 樣式：

$ npm install postcss-cli autoprefixer --save-dev
or
$ yarn add postcss-cli autoprefixer --save-dev

這些命令將確保您使用的是最新版本的 tailwind，PostCSS 和 Autoprefixer。

第四步：配置 PostCSS

運行下面的命令創建 PostCSS 配置文件：

$ touch postcss.config.js

添加下面的代碼到剛纔創建的配置文件中：

//postcss.config.js
 const tailwindcss = require('tailwindcss');
 module.exports = {
     plugins: [
         tailwindcss('./tailwind.js'),
         require('autoprefixer'),
     ],
 }

第五步：在 package.json 文件中更新 scripts 腳本命令

我們在根目錄中定位到 package json 文件，把 scripts 腳本命令的代碼變成下面這樣：

"scripts": {
  "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
  "start": "npm run build:style && react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

第六步：創建存放樣式 css 的目錄 styles

在 src 目錄(存放源碼的目錄) 創建 styles 目錄，專門來存放樣式文件的。

然後在 styles 目錄裏創建 tailwind.css 文件，還有 index.css 文件。

index.css 文件的內容如下：

// ./src/styles/index.css 
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

或者這樣：

// ./src/styles/index.css
@tailwind base;

@tailwind components;

@tailwind utilities;

第 7 步：導入 tailwind.css

您應該刪除項目根目錄中的 index.css 和 app.css 文件，並分別刪除 Index.js 和 App.js 文件中的 import 語句。

現在您可以將其導入到 index.js 文件中。

import './styles/tailwind.css';

第 8 步：測式 tailwind 是否能正常運行

現在，在您的 app.js 文件中，繼續添加以下代碼：

<div className="text-blue-500">
     TailwindCSS setup
</div>

您的 app.js 文件應如下所示：

[站外圖片上傳中...(image-ec8e31-1613710780271)]

現在在您的命令上運行本地服務：

$ yarn start

如果您的文字爲藍色，則表示一切設置正確，恭喜！