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

本文主要是介绍如何使用 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 项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript