使用 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

得到以下结果:

现在!!

准备好了吗?

现在学开始卷起来吧!

相关推荐
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
风尚云网7 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
GISer_Jing7 小时前
React核心功能详解(一)
前端·react.js·前端框架
FØund40410 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
酷酷的威朗普10 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮10 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
景天科技苑10 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
疯狂的沙粒10 小时前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
土豆湿11 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鑫宝Code11 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架