年初一给大家拜年了!【译】请拿走 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

这些命令将确保您使用的是最新版本的 tailwindPostCSSAutoprefixer

第四步:配置 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.cssapp.css 文件,并分别删除 Index.jsApp.js 文件中的 import 语句。

现在您可以将其导入到 index.js 文件中。

import './styles/tailwind.css';

第 8 步:测式 tailwind 是否能正常运行

现在,在您的 app.js 文件中,继续添加以下代码:

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

您的 app.js 文件应如下所示:

Image for post

现在在您的命令上运行本地服务:

$ yarn start

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