【译】请拿走 2021 年在 React 项目中使用 Tailw

image.png

这是一个快速教程，教您如何为您的 React 项目使用 Tailwind CSS。

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

image.png

第 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

如果您的文字为蓝色，则表示一切设置正确，恭喜！