4.2.3.5 框架与库 - 组件资源与 CSS 处理

为了加快开发程序，快速构建漂亮且功能齐全的用户界面，我们就需要用到样式库。样式库可以帮助我们摆脱手写 CSS 的烦恼，使用已经封装好的组件来加快开发。

组件库提供一些 React Component 供你使用，Tailwind 封装了一些 CSS class (类) 来提供手写 CSS 的替代。两者结合可以极大改善开发体验。

组件资源: Ant Design

Ant Design 是阿里开源的一个组件库，国内用的人很多，而且有中文文档，因此我们选择这个。如果你特别钟爱 Material Design 风格，可以使用 MUI: Material Design。

你可以查阅 Ant Design: 组件总览 来使用他们提供的组件，用法就像普通的 React Component。

Ant Design 还提供了不少图标资源可以使用。

安装：

$ npm install antd

CSS 处理: Tailwind CSS

这里我们给出 GPT 提供的介绍，GPT 对于这些简单的东西的入门给出的文本还算差强人意，虽然官方文档也提了但是你们肯定不会认真看英文的对吧。

但是官方文档还是要读的，因为 Tailwind 的功能很多，你在用到的时候如果忘记了就可以查。再次重申不需要完整记忆内容，用到就查。

Tailwind CSS 简介

Tailwind CSS 是一个实用优先（utility-first）的 CSS 框架，它为你提供了大量的低级样式类，使你可以直接在 HTML 中进行布局和设计。与传统的 CSS 框架不同，Tailwind CSS 并没有提供很多预先设计好的组件，而是让你通过组合这些样式类，快速创建符合自己设计需求的 UI。

Tailwind 的特点：

1. 实用优先：你可以通过一系列简短的类名直接控制元素的样式，比如 bg-blue-500 （蓝色背景）或 text-center （文字居中）。
2. 自定义强大：Tailwind 配置文件允许你扩展或覆盖框架中的任何部分，轻松定制颜色、字体、间距等。
3. 响应式设计：Tailwind 内置了响应式工具类，可以轻松创建响应式布局，例如 md:text-left lg:text-right 表示在中等屏幕居左显示，在大屏幕居右显示。
4. 即用即写：无需额外编写 CSS 文件，直接使用类名就可以完成样式设计。

---

快速入门

1. 安装 Tailwind CSS

WARNING

如果遇到问题，请以 Tailwind 官方的 Vite 教程 (不是 Create React App 版本的，那个是另一个框架) 为准。

在 Vite 项目中，可以通过以下步骤安装 Tailwind CSS：

1. 安装 Tailwind 和相关依赖：

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

2. 配置 tailwind.config.js 文件：

   module.exports = {
      content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };

3. 在项目的 src/index.css 文件中引入 Tailwind 基础样式（提示一下，可以顺便清除模板的示例 CSS 的内容，模板给的东西都是占位用的大胆删）：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

4. 在你的组件或页面中使用 Tailwind 类：

   export default function Button() {
     return <button className="bg-blue-500 text-white p-4 rounded">Click Me</button>;
   }

5. 在你的 VSCode 里安装 Tailwind CSS IntelliSense 插件提供补全。可以参考 Tailwind: Editor Setup 中提供的描述。

2. 常用类

• 布局：

  • flex ：创建弹性布局
  • grid ：创建网格布局
  • w-full ：宽度占满
  • h-screen ：高度为屏幕高度

• 间距：

  • p-4 ：内边距为 1rem
  • m-2 ：外边距为 0.5rem
  • space-x-4 ：水平间隔 1rem

• 排版：

  • text-xl ：字体大小为 1.25rem
  • font-bold ：加粗
  • text-center ：文字居中

• 颜色：

  • bg-blue-500 ：背景颜色为蓝色
  • text-white ：文字颜色为白色

• 响应式：

  • md:text-lg ：中等屏幕时字体大小为 1.125rem
  • lg:p-8 ：大屏幕时内边距为 2rem

---

如何查阅 Tailwind 文档

Tailwind CSS 的官方文档非常全面，详细列出了所有可用的工具类及其用法，还包括如何配置 Tailwind、定制主题、使用插件等。

1. 查阅官方文档

• 访问 Tailwind CSS 文档。
• 文档首页提供了各类基础指南、工具类参考、插件系统以及 Tailwind 的配置方法。

2. 文档导航

• Utilities：点击文档中的 Utilities 部分，可以看到所有样式类的使用方法，包括布局、间距、排版、颜色等。
• Responsive Design：可以学习如何为不同屏幕大小设计响应式页面。
• Customization：文档中的 Customization 部分详细解释了如何通过配置文件修改默认样式、扩展 Tailwind。

3. 文档中的示例

• 文档中的每个类名都会附带相应的使用示例，并展示在不同场景下的效果。

学习 Tailwind CSS 时，建议一边阅读文档一边动手实践，通过逐步搭建小组件或页面，更好地掌握这个实用的工具。