使用 Tailwind CSS 设置 Vite+ ReactJs

介绍:

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

在本文中,我们将学习如何使用 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

得到以下结果:

现在!!

准备好了吗?

现在学开始卷起来吧!

相关推荐
HuaHua的世界17 分钟前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
鹿九巫24 分钟前
【CSS】层叠,优先级与继承(三):超详细继承知识点
前端·css
AXUI27 分钟前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html
H5开发新纪元33 分钟前
借助 GitHub Copilot 打造一个完美的 React 消息引用系统:从设计到实现的深度剖析
前端·react.js
哟哟耶耶34 分钟前
react-09React生命周期
前端·javascript·react.js
末日的狂欢姐1 小时前
至美!看AXUI如何美化原始HTML标签(reset/normalize)
css·html·reset·normalize
进取星辰1 小时前
13、性能优化:魔法的流畅之道——React 19 memo/lazy
前端·react.js·前端框架
zwjapple2 小时前
React中createPortal 的详细用法
前端·javascript·react.js
小矮马2 小时前
React-组件通信
前端·javascript·react.js
火星思想2 小时前
React如何实现时间切片
前端·react.js