将Tailwind CSS集成到React应用中

Tailwind CSS 是一个低级的CSS框架，具有高度可定制性。与其他提供预设计组件（按钮、卡片、模态框等）的框架或UI工具包不同，这些框架虽然能帮助你快速开始，但后期定制起来可能比较麻烦，而Tailwind专注于低级的实用类（实用优先），让你能够构建自己的设计而不必担心覆盖现有样式。

在这篇文章中，我将指导你如何将Tailwind CSS集成到React应用中 🤩

创建React应用

创建React应用最简单的方法是使用create-react-app脚本配合npx

npx create-react-app my-app && cd my-app

使用npx可以让你运行create-react-app脚本而无需安装该包。

添加依赖

安装以下devDependencies来设置Tailwind CSS

yarn add tailwindcss postcss-cli autoprefixer -D
## 或者 npm install tailwindcss postcss-cli autoprefixer --save-dev

除了Tailwind CSS，我们还将安装：

PostCSS：一个使用JS插件分析和转换样式的工具，有助于CSS建议、支持变量和mixins、编译新的CSS特性等。
Autoprefixer：一个PostCSS插件，它基于Can I Use的数据自动添加供应商前缀（-webkit-、-moz-、-ms-、-o-等），以确保你的CSS在多个浏览器上正常工作。

配置PostCSS

PostCSS帮助管理和配置你的CSS构建过程。

创建配置文件：

touch postcss.config.js

添加以下配置：

postcss.config.js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
}

这个构建过程使用两个插件：tailwindcss和autoprefixer。

注入Tailwind CSS

在src文件夹内创建一个名为styles的子文件夹。在styles文件夹中，创建一个名为tailwind.css的文件。

或者使用命令行：

mkdir src/styles && touch src/styles/tailwind.css

从Tailwind CSS导入以下模块：

tailwind.css

@tailwind base;
 
@tailwind components;
 
@tailwind utilities;

你可以将tailwind.css文件放在任何你喜欢的文件夹中，如src/static、src/assets、src/styles...

添加构建脚本

打开package.json文件，添加以下构建脚本（在scripts对象内）：

"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"

这个脚本使用PostCSS CLI基于tailwind.css文件中的配置构建CSS，输出（标志-o）为main.css。

你可以选择自己喜欢的文件名和位置。这里，我将输入配置文件和输出都放在同一个文件夹中：src/styles。

现在你可以使用以下命令手动触发构建：

yarn build:css
# 或者 npm run build:css

配置和构建完成后，你的项目结构应该如下所示：

为了让事情变得更简单，你可以将build:css命令集成到项目的start和build脚本中，确保每次启动项目时，你的CSS总是使用最新的更新重新构建：

package.json

"scripts": {
	"start": "npm run build:css && react-scripts start",
	"build": "npm run build:css && react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject",
	"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
}
// 更多配置...

现在要构建CSS并启动项目，你只需要运行yarn start。

在React组件中使用Tailwind CSS

将构建好的CSS导入到项目的启动文件中（我的是index.js）：

import './styles/main.css'

创建一个基本组件：

app.jsx

import React from 'react'
 
function App() {
  return (
    <div className="flex justify-center pt-8">
      <div className="w-full max-w-sm shadow-lg lg:flex lg:max-w-full">
        <div
          className="h-48 flex-none overflow-hidden rounded-t bg-cover text-center lg:h-auto lg:w-48 lg:rounded-l lg:rounded-t-none"
          style={{
            backgroundImage: `url('https://image-us.24h.com.vn/upload/1-2020/images/2020-02-06/kodfd-1580928361-474-width640height480.jpg')`,
          }}
          title="Woman holding a mug"
        ></div>
        <div className="flex flex-col justify-between rounded-b border-b border-l border-r border-gray-400 bg-white p-4 leading-normal lg:rounded-b-none lg:rounded-r lg:border-l-0 lg:border-t lg:border-gray-400">
          <div className="mb-8">
            <p className="flex items-center text-sm text-gray-600">最新消息</p>
            <div className="mb-2 text-xl font-bold text-gray-900">
              梅西即将转会曼城
            </div>
            <p className="text-base text-gray-700">
              这是一段示例文本，用于展示Tailwind CSS的样式效果。你可以根据需要替换为任何内容。
            </p>
          </div>
          <div className="flex items-center">
            <img
              className="mr-4 h-10 w-10 rounded-full"
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRG2WOlZ4KLuNN1ksjNOmh6oZ091IUhJiZD7w&usqp=CAU"
              alt="Avatar of Jonathan Reinink"
            />
            <div className="text-sm">
              <p className="leading-none text-gray-900">Jonathan Reinink</p>
              <p className="text-gray-600">8月18日</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
 
export default App

这是结果 🎉 🎉

总结

希望通过这个教程，你能够在你的项目中集成和使用Tailwind CSS。我个人觉得这个框架相当简单、易用且质量很好。

如果你有任何反馈，请在下方留言。