React简单教程-3.1-样式之使用 tailwindcss

前言

本文是作为一个额外内容，主要介绍 tailwindcss 的用法

tailwindcss 是一个功能类优先的 CSS 框架，我在以前的文章里有描述为什么使用功能类优先：为什么我在 css 里使用功能类优先

在上一章中我们的 react 组件有了一个简单的样式，在这一篇我们将使用 tailwindcss 来重新编写它的样式。我将使用我们上一章的代码为例子。

Tailwind CSS 前置知识

不要害怕功能类优先的写法，总体来说它其实和我们传统的 CSS 写法没有什么不同，如果你会写 CSS，那就一定很容易上手功能类优先的写法。

如果你之前使用过 boostrap，那就更容易入手 tailwind 了，你完全可以当成 bootstrap 来写。

如果你完全不会 CSS，只想找一个组件库来使用，那么这篇文章就不适合你了。

安装

在项目根目录下打开终端，输入

npm install -D tailwindcss@latest

这个命令将在你的 devDependencies 中安装 tailwindcss，我们只需要在开发时使用这个包，所以确保安装在你的 devDependencies 中。

安装 vs code 插件，推荐

如果你使用的时 vs code 编写代码，那么我推荐你安装这个插件，Tailwind CSS IntelliSense，它会在你开发的时候给你提供样式输入的便利。

配置文件

安装好后，在终端中输入命令：

npx tailwindcss init

将在根目录下帮我们新建一个默认的配置文件。

配置文件的内容如下：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

也可以手动创建这个文件。

我们先看这个 content 属性，这个属性用来表示我们要用到样式的源文件路径。我们写入如下的路径：

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

这样，我们就告诉了 tailwind：根目录 src 文件夹下的所有以 ts,tsx,jsx,js 结尾的文件都会使用 tailwindcss。使用生成 tailwind 生成样式文件的时候会参考这些文件里的 css 类。

其他的配置我们先不说，等使用到了在说明。

生成样式文件

在这个时候我们就已经可以使用 tailwind 来生成样式文件了。我们在终端中输入：

npx tailwindcss -o ./src/styles/tailwind.css

上面的命令用于执行 tailwind 的功能来生成样式文件，参数 -o 指定生成的样式文件放在什么地方。执行之后，你应该会看到如下的输出：

这是因为你还没有写任何的 tailwind 功能类，所以也就没有生成样式文件。接下来我们在子组件 Displayer 里写功能类，首先先改造 .container 这个类。原来的样式是这样的：

// 组件
export function Displayer(/* 省略 */) {
  //  省略
  return (
    <div className="container">
      {/* 省略 */}
    </div>
  );
}

//  css
.container {
  background-color: rgb(40 40 40);
  color: white;
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 10px;
}

改为如下写法:

// 组件
export function Displayer(/* 省略 */) {
  //  省略
  return (
    //  功能类写法
    <div className="bg-gray-800 text-white p-2 m-2 rounded-lg">
      {/* 省略 */}
    </div>
  );
}

再执行 npx tailwindcss -o ./src/styles/tailwind.css，生成样式文件，你会在目录下看到生成的文件：

点进入查看内容，你会看到帮你生成的 css 样式，除了一些基本样式之外，在文件的最下方，会看到我们刚刚使用的功能类样式：

这也是和 bootstrap 不同的地方，bootstrap 是一次导入所有的样式，tailwindcss 是生成你用到的样式，大大减少了体积。

最后我们在我们的根组件下引入 tailwind.css 这个文件。

//  main.tsx
import "./styles/tailwind.css";

//  省略

启动项目后便能够看到效果了，也是和我们以前一样：

功能类用法解释

我们首先用了如下几个功能类：bg-gray-800 text-white p-2 m-2 rounded-lg。如果你用过 bootstrap 的话，那么你应该对这种写法很熟悉了。如果没用过，那么其实就是普通的 css 类，在 F12 里查看样式，就能看到。tailwind 里定义了一套常用的类给我们使用，像例子中

• bg-gray-800 表示背景颜色（background-color）为灰色（gray），800 表示灰色有多浓厚。
• text-white 表示字体颜色（color）是白色（white）。
• p-2 表示内边距（padding）的值为 2，在 tailwind 中是 0.5rem。
• m-2 表示内边距（margin）的值为 2，在 tailwind 中是 0.5rem。
• rounded-lg 表示边框圆角（border-radius），要多圆？lg 的程度，在 tailwind 中是 0.5rem。

功能类的用法其实直接将我们语义类的用法展开而已。

启动时的配置

在我们生成样式文件的时候是在终端输入命令来生成的，这样每次都要敲一遍命令太麻烦了，我们可以把命令修改成

npx tailwindcss -o ./src/styles/tailwind.css --watch

--watch 参数是让 tailwind 监听，随时生成最新的样式文件，这样就不需要时不时手动生成了。

更方便一点，可以将我们的启动脚本修改为：

{
//  省略
"scripts": {
    "dev": "run-p dev:*",
    "dev:css": "tailwindcss -o ./src/styles/tailwind.css --watch",
    "dev:server": "vite",
    //  省略
  },
  "devDependencies": {
    //  省略
    "npm-run-all": "^4.1.5",
    //  省略
  }
//  省略
}

我们让 tailwind 的监听随着我们的项目开发启动而启动，省去了输入命令。

这里我使用了 npm-run-all 这个包，能够帮我们方便的执行多个脚本。使用时要记得先安装，关于用法看文档，在这里不说明。这样在我们使用 npm run dev 的时候，就会启动 tailwind 的监听和启动项目的开发服务器。

修改我们的功能类，你可以看到 tailwind 会自动帮我们生成最新的样式，方便之极。

有那些功能类可以使用？

基本上只要你能用到的效果，tailwind 都有提供。而且除了基本的样式之外，tailwind 也封装了一些常用到的效果，像 ring，这个类用于在元素的周围加上一圈光环。其他效果具体有什么还是要去看文档的 tailwind 文档。

下面我介绍几种比较特殊的用法。

变体

tailwind 的变体写法是用于实现伪类的样式效果。

比如在我们把鼠标移动到元素后需要元素改变样式，我们会使用到伪类 :hover，在 tailwind 里使用功能类也可以指定应用到伪类，通过添加 hover: 来使关联的功能类在 hover 时生效。示例如下：

<div className="hover:text-center"></div>

上面的写法，在 text-center 前加上 hover: 前缀，使其应用在了 hover 伪类里，相当于：

.text-center:hover {
  text-align: center;
}

tailwind 还有许多常用的变体，可在文档 变体 中查看。

封装常用样式

如果多个相同元素的样式是一摸一样的，那么每次都重复编写功能类就会显得繁琐。对这种情况推荐封装样式，有以下两种写法。

1、 全局类

通过在项目中额外引入一个全局的 css 文件，将可重用的样式写在里面。

新建全局 css 文件：

编写样式：

/* global.css */
/* 全局样式 */
.btn {
  background-color: rgb(81, 81, 206);
  text-align: center;
}

在根目录中引入：

import "./styles/global.css";

之后便可以直接在元素上使用：

<button className="btn"></button>

2、包装常用组件

这也是推荐的方式，包装成一个常用的组件。如下：

//  将常用的 button 样式封装到新的组件中
export function Button(props: any) {
  const { children, ...newProps } = props;
  return (
    <button className="bg-gray-300" {...newProps}>
      {children}
    </button>
  );
}

以后便可以用这个组件 <Button>按钮</Button> 代替原生的 <button>按钮</button>。

参考

Tailwind CSS by Tailwind CSS