使用 Tailwind CSS 设置 Vite+ ReactJs

介绍：

前端很卷总是尝试优化事物！

在本文中，我们将学习如何使用 Tailwind 建立 Vite + React 项目。

没有学不动，都卷起来！！！

那么事不宜迟，准备好发车啦！

操作步骤：

步骤1：

首先，打开终端并选择要在其中创建项目文件夹的目录。

请cd Desktop在终端中运行。

第2步：

现在，通过在终端上运行以下命令在桌面上创建项目文件夹：

npm create vite@latest project-name -- --template react

💡 更改project-name为你的项目名称。

这里我们将项目名称取为Demo项目。

所以我们的命令是：

npm create vite@latest demo-project -- --template react

该命令将创建我们的项目文件夹。

💡 注意：这里--template react指定我们正在使用 Vite 创建一个 React App。

步骤3：

创建项目文件夹后，然后 cd进入项目文件夹。

cd demo-project

运行此命令后，将得到：

💡 注意：将 demo-project 更改为你的项目名称。

步骤4：

现在，下载 TailwindCss 和其他所需的依赖项。

运行以下命令：

npm install -D tailwindcss postcss autoprefixer

此命令安装 Tailwind CSS 框架、post-Css 和 post-Css 框架自动前缀依赖。

要确认这些依赖项已成功安装在您的项目中package.json，请检查，它应该如下所示：

步骤5：

现在，生成 tailwind 配置文件。

运行以下命令：

npx tailwindcss init -p

此命令生成tailwind.config.js配置postcss.config.js文件。

步骤6：

接下来，在文件中添加所有模板文件的路径tailwind.config.js。模板文件包括 HTML 模板、JavaScript 组件和其他包含 Tailwind 类名称的源文件。

这样，Tailwind 类将应用于整个项目。

为此，将以下代码添加到tailwind.config.js文件的内容部分。

"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",

现在该文件将如下所示：

步骤7：

现在已经在项目中设置了 Tailwind，把 Tailwind 指令添加到我们的项目中。

要了解有关 Tailwind 指令的更多信息，请查看This。

添加 tailwind 指令index.css

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

💡 文件夹中将会添加一些默认样式。删除它们并添加你的样式。否则，我可能会造成混乱。

步骤8：

快完成了！

现在将通过运行以下代码来启动 Vite 服务器：

npm run dev

它将启动一个本地服务。

现在，转到链接后，您会看到以下内容：

最后一步：

验证 Vite 和 Tailwind CSS 是否可以正常工作。在App.jsx文件并编写以下代码：

import { useState } from 'react'
const App = () => {
    return (
        <div className="App">
            <h1 className="text-3xl text-center font-bold underline">
                Hello world!
            </h1>
        </div>
        )
}
export default App

得到以下结果：

现在！！

准备好了吗？

现在学开始卷起来吧！