02 环境准备和安装：使用 React 和 Tailwind CSS 创建响应式公司网站

Orienslu
1,037 阅读5分钟

在学习如何使用 Tailwind CSS 之前，我们需要先对环境进行设置。

如何安装 Node.js 和 pnpm

Node.js 的安装

首先，我们需要安装 Node.js，它是 JavaScript 在服务器端运行的环境。直接访问 Node.js 官方网站 nodejs.org/ ，下载并安装适合你计算机的版本。我推荐选择稳定版 LTS 版本。

pnpm 的安装

装好了 Node.js 后，我们要来安装 pnpm，一款高效且人性化的包管理器。打开命令行输入以下命令并执行：

npm install -g pnpm

检查安装情况

打开命令行终端，h验证安装结果，输入以下命令：

node -v
# v16.16.0

pnpm -v
# 8.6.3

这两行命令能分别显示你的 node 和 pnpm 的版本信息，如果有版本号出现，恭喜你！初级步骤已完成！

carbon_(4).png

新的 React 项目中安装和配置 Tailwind CSS

现在让我们创建一个 React + TypeScript + Vite 的新项目，并集成 Tailwind CSS：

创建 Vite + React + TypeScript 项目

利用 Vite 我们可以快捷地创建一个新项目，将 tao-home 替换为你的项目名称，打开命令行输入以下代码并执行：

pnpm create vite tao-home --template react-ts
cd tao-home

pnpm install

上述命令表示我们利用 Vite 创建了一个名为 tao-home 的新应用，并指定模板为 react-ts（即采用 React + TypeScript 技术栈）。

carbon_(5).png

接下来启动项目，运行下面的命令，在浏览器中打开 http://127.0.0.1:5173/ 看到如下的界面，就表示项目运行成功了。

pnpm dev

carbon_(9).png

Untitled.png

安装 Tailwind CSS

进入新建立的项目目录 (tao-home)，然后在命令行中键入以下代码并执行, 来安装 Tailwind CSS 及其依赖：

# 确保在你的项目目录下
cd tao-home

pnpm add tailwindcss postcss autoprefixer

carbon_(6).png

生成 Tailwind 配置文件

让我们暂停项目，回到命令行界面，按下 ctrl + c 就可以终止项目。

下一步，生成 Tailwind 的配置文件 tailwind.config.js，同时会生成一个 postcss.config.js. 输入以下命令并执行：

npx tailwindcss init -p

carbon_(7).png

这时候我们整个项目的结构如下图所示。

Untitled 1.png

为了方便追踪，我们将代码及时提交到 git。

git add .
git commit -m 'feat: 初始化项目'

Untitled 2.png

接下来，在 tailwind.config.js 件中添加所有模板文件的路径。

# tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  // ...
}

Untitled 3.png

上述代码表示 Tailwind 将查看 src 文件夹下的所有 html、js、jsx 文件，并根据这些文件里实际使用到的工具类，有选择性地打包 CSS 代码。

在 CSS 中引入 Tailwind

接着，打开 src/index.css 文件，并删除掉里面所有的代码，输入下面的代码以导入 Tailwind CSS。如果此文件不存在，可以创建一个。

# src/index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Untitled 4.png

在主文件引入 CSS

最后，确认在 React 主程序文件（main.tsx）中引入了该 CSS 文件，项目在初始化的时候已经添加这个引入，如果没有可以在文件最顶部添加以下代码：

// src/main.tsx

import './index.css'

至此，你已经成功在新项目中集成了 Tailwind CSS！下一步，就可以愉快地开始 Tailwind CSS 编程啦！

整理当前的代码

首先我们删除掉 App.css 文件，因为后续我们几乎不会手动写 CSS，全部的样式由 Tailwind CSS 提供。

全屏居中的布局

接下来改造 App.tsx，删掉初始化时的内容，然后加下面这一段代码。

// src/App.tsx

function App() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      你好👋，Tailwind CSS！
    </div>
  );
}

export default App;

重新在终端运行 pnpm dev，如果在浏览器看到了如下界面，恭喜你，所有的环境都配置成功了！并且成功使用 Tailwind CSS 实现了一个全屏居中的布局。

Untitled 5.png

发现我们仅仅用了一系列的 CSS 类名，就实现了全局居中的布局，这就是基于 Tailwind CSS 开发页面的魅力所在。我们解释下类名的含义。

  • min-h-screen: 将元素的最小高度设置为屏幕的高度。这意味着，无论内容的实际高度多少，这个元素都会至少占据整个屏幕的高度。
  • flex: 应用 CSS 的 flexbox 布局，使其子元素可以使用弹性布局的特性，比如自动伸缩、对齐等。
  • items-center: 在垂直方向上，使得 flexbox 布局的子元素居中对齐。
  • justify-center: 在水平方向上，使得 flexbox 布局的子元素居中对齐。

当分解这些 Tailwind 类名为单独的 CSS 类，其中每个类专注于一种样式规则，我们得到：

.min-h-screen {
  min-height: 100vh;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

因此，一个带有这些类名的元素会被渲染成一个最小高度等于屏幕高度的盒子，其所有子元素在该盒子里居中显示。而由于使用了弹性布局（flexbox），这些子元素还能在需要时进行伸缩以适应不同尺寸的显示设备。

网页标题和图标

我们按以下步骤操作来改变网页的标题（title）和图标（favicon）。

  1. 修改页面标题

    找到并修改项目中 public/index.html 文件中的 <title> 标签内容。

    <!-- index.html -->

<title>桃李 ｜ 定制化的学习路线平台</title>

  2. 更换图标（favicon）

    想要更换网站图标，你需要准备一个自己 favicon.ico 图标，然后保存到 public/favicon.ico 文件。接下来找到并修改这一行代码。

    简单地将一张 .png 的图片后缀改为 .ico 就可以获取到对应的图标，但换汤不换药。 也可以使用专门的转换工具进行格式转换，比如 favicon.io/ 可以满足各种定制。

    <!-- index.html -->

<link rel="icon" type="image/svg+xml" href="/favicon.ico" />

    Untitled 6.png

这时候再次回到浏览器可以看到图标和标题都已经更新了。

Untitled 7.png

最后，我们可以新开一个终端，提交我们的代码。

# 查看代码更新状态
git status

git add .
git commit -m 'feat: 配置 tailwind css 环境'

Untitled 8.png

avatar
文章
阅读
粉丝