大家好,这次我将分享如何在我们的React项目中使用Tailwind CSS。让我们马上开始吧。

确保您已在您的计算机/笔记本电脑上安装了nodejs。因为要创建一个 React 项目,我们需要通过安装 nodejs 来使用 NPM。要检查是否安装了 nodejs,请在终端中输入以下命令。

node -v

进入全屏模式 退出全屏模式

如果出现版本,说明 nodejs 已经安装。然后要检查 NPM 版本,请键入以下命令。

npm -v

进入全屏模式 退出全屏模式

如果出现 NPM 版本,那么我们可以创建一个 React 项目。

首先,如果我们还没有 React 项目,请创建一个 React 项目。如果你已经有一个 React 项目,请跳过这一步。我们将使用Create React App创建一个新的 React 项目。

打开终端,确保您位于要保存 React 项目的目录中。键入以下命令。

npx create-react-app my-project

进入全屏模式 退出全屏模式

你可以随意给出你要安装的项目的名字,这次我以_my-project_这个名字为例。等待安装过程运行完成。完成后,转到我们之前创建的 React 项目目录。键入以下命令。

cd my-project

进入全屏模式 退出全屏模式

要运行 React 项目,请键入以下命令。

npm start

进入全屏模式 退出全屏模式

然后浏览器会自动打开页面http://localhost:3000/你会看到安装好的 React 项目的初始视图。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--0U9Y_zr9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/620x4hylb4xlmkecza0e.png)

接下来,通过在终端中键入以下命令来安装 Tailwind CSS。

npm install -D tailwindcss postcss autoprefixer

进入全屏模式 退出全屏模式

等待它完成,然后再次键入以下命令。

npx tailwindcss init -p

进入全屏模式 退出全屏模式

如果一切顺利,则 Tailwind CSS 已成功安装。接下来,在代码编辑器中打开我们的 React 项目。然后打开文件_tailwind.config.js_编辑成这样。

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

进入全屏模式 退出全屏模式

然后为了能够使用 Tailwind CSS,将位于 src 文件夹中的 index.css 文件编辑成这样。

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

进入全屏模式 退出全屏模式

安装过程完成,可以使用 Tailwind CSS。要检查它是否已经安装成功,请尝试将_App.js_文件编辑成这样。

<p className="text-3xl font-bold underline text-red-500">
  Edit <code>src/App.js</code> and save to reload.
</p>

进入全屏模式 退出全屏模式

保存并运行项目,您将看到不同之处。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--LI_tsReG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/kpt4i6d6jdrgob3mjxkc.png)