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

得到以下结果:

现在!!

准备好了吗?

现在学开始卷起来吧!

相关推荐
码上暴富11 小时前
css里flex+margin布局
前端·css
灰色人生qwer11 小时前
React + TypeScript+ Vite 配置路径别名和vscode智能路径提示
vscode·react.js·typescript
GISer_Jing11 小时前
前端框架React知识回顾
前端·react.js·前端框架
Jackson@ML11 小时前
React入门 – 1. 学习React的预备知识
javascript·react.js·ui
风清云淡_A11 小时前
【react8】如何在网页中直接引入react进行demo开发
react.js
qq_4005520011 小时前
新的面试题CSS
前端·css
浊尘11 小时前
用React实现一个登录界面
前端·react.js·前端框架
naodianbozzz12 小时前
web第三次作业
前端·javascript·css
centerless12 小时前
深入了解 CSS Grid 布局:构建高效响应式网页的利器
前端·css
minko14 小时前
这给我干哪儿来了,这还是react-router吗
react.js·vite