介绍:
前端很卷
总是尝试优化事物!
在本文中,我们将学习如何使用 Tailwind 建立 Vite + React 项目。
没有学不动,都卷起来!!!
那么事不宜迟,准备好发车啦!
操作步骤:
步骤1:
首先,打开终端并选择要在其中创建项目文件夹的目录。
请cd Desktop
在终端中运行。
第2步:
现在,通过在终端上运行以下命令在桌面上创建项目文件夹:
bash
npm create vite@latest project-name -- --template react
💡
更改project-name
为你的项目名称。
这里我们将项目名称取为Demo项目。
所以我们的命令是:
bash
npm create vite@latest demo-project -- --template react
该命令将创建我们的项目文件夹。
💡
注意:这里--template react
指定我们正在使用 Vite 创建一个 React App。
步骤3:
创建项目文件夹后,然后 cd
进入项目文件夹。
bash
cd demo-project
运行此命令后,将得到:
💡
注意:将 demo-project
更改为你的项目名称。
步骤4:
现在,下载 TailwindCss 和其他所需的依赖项。
运行以下命令:
bash
npm install -D tailwindcss postcss autoprefixer
此命令安装 Tailwind CSS 框架、post-Css 和 post-Css 框架自动前缀依赖。
要确认这些依赖项已成功安装在您的项目中package.json
,请检查,它应该如下所示:
步骤5:
现在,生成 tailwind 配置文件。
运行以下命令:
bash
npx tailwindcss init -p
此命令生成tailwind.config.js
配置postcss.config.js
文件。
步骤6:
接下来,在文件中添加所有模板文件的路径tailwind.config.js
。模板文件包括 HTML 模板、JavaScript 组件和其他包含 Tailwind 类名称的源文件。
这样,Tailwind 类将应用于整个项目。
为此,将以下代码添加到tailwind.config.js
文件的内容部分。
js
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
现在该文件将如下所示:
步骤7:
现在已经在项目中设置了 Tailwind,把 Tailwind 指令添加到我们的项目中。
要了解有关 Tailwind 指令的更多信息,请查看This。
添加 tailwind 指令index.css
css
@tailwind base;
@tailwind components;
@tailwind utilities;
💡
文件夹中将会添加一些默认样式。删除它们并添加你的样式。否则,我可能会造成混乱。
步骤8:
快完成了!
现在将通过运行以下代码来启动 Vite 服务器:
bash
npm run dev
它将启动一个本地服务。
现在,转到链接后,您会看到以下内容:
最后一步:
验证 Vite 和 Tailwind CSS 是否可以正常工作。在App.jsx
文件并编写以下代码:
js
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
得到以下结果:
现在!!
准备好了吗?
现在学开始卷起来吧!