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

得到以下结果:

现在!!

准备好了吗?

现在学开始卷起来吧!

相关推荐
FakeOccupational8 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull8 小时前
ReactPress:构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心,方可放逐8 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄9 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
KO想偷懒13 小时前
第七章 利用CSS和多媒体美化页面习题
前端·css·html·html5
小牛itbull13 小时前
ReactPress – An Open-Source Publishing Platform Built with React
前端·react.js·前端框架
亚v13 小时前
第8章利用CSS制作导航菜单
前端·css
读心悦14 小时前
CSS 如何让图片按照原比例展示
前端·css
前端Hardy15 小时前
HTML&CSS: 日落卡片
前端·javascript·css·html·css3
花开花落与云卷云舒16 小时前
新手 Vue 项目运行
前端·javascript·css·vue.js·前端框架·html·springboot