ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

如何使用 TailwindCSS 框架设置 React + Vite 项目

2022-10-31 19:21:36  阅读:272  来源: 互联网

标签:tailwindcss 使用 框架结构 react vite 项目


介绍
在本文中,我们将学习如何使用 TailwindCss 使用 Vite 设置 React 应用程序。

React 是一个用于前端开发的 JavaScript 框架,被前端开发人员广泛使用。

Tailwindcss 是一个 CSS 框架,目前很流行,大多数开发人员都在使用,就像 Bootstrap 和其他框架一样。
 

步骤 1

在我们必须安装 Nodejs 和 Vscode 之后,下一步是在我们的桌面上创建一个文件夹,最好在我们的本地磁盘上创建一个文件夹,并根据您的项目命名它。在本文中,我们将文件夹命名为

新文件

步骤 2

现在,我们将通过打开Vscode来打开我们创建的文件夹

图像描述

步骤 3

我们将安装 Vite

使用此链接 [(https://vitejs.dev/guide/)]

你应该有一个这样的屏幕:

图像描述

步骤 4

我们将复制突出显示命令(npm create vite@latest)并打开我们的 Vscode,然后单击终端并打开一个新终端

图像描述

并像这样粘贴它

图像描述

使用我们的键盘,我们将键入字母Y以继续。并根据要求添加我们的项目名称。

步骤 5

我们单击输入按钮,接下来我们使用箭头键浏览所需的框架。为此,我们使用 React。就像我们在下面看到的一样。

图像描述

步骤 6

导航后,我们单击React,另一个可供选择的选项将是选择JavaScript或TypeScipt,我们将单击JavaScript。

图像描述

步骤 7

安装后,我们有这样的屏幕来运行以下命令

图像描述

步骤 8

我们正在使用 cd 命令返回我们的根目录

cd ./text/
这是我们的项目名称

图像描述

标签:tailwindcss,使用,框架结构,react,vite,项目
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有