tailwindcss

前言

肯定有人会问，tailwindcss 是什么？有什么作用？

首先回答一下 tailwindcss 是什么，它是一种 原子化 CSS 工具。

在解释 原子化 CSS 前，我们先看一段代码:

<html>
  <header>
    <style>
      .price-label {
        font-size: 12px;
        color: #ddd;
        line-height: 2;
      }

      .discount_price-label {
        font-size: 12px;
        color: #000;
        line-height: 2;
      }
    </style>
  </header>
  <body>
    <div>
      <del class="discount_price-label">12.00</del>
      <span class="price-label">12.00</span>
    </div>
  </body>
</html>

作为初级前端开发，常常写出这样的代码；但是里面部分重复的代码，我们可以抽出来进行复用

<html>
  <header>
    <style>
      .label {
        font-size: 12px;
        line-height: 2;
      }
      .price-label {
        color: #ddd;
      }

      .discount_price-label {
        color: #000;
      }
    </style>
  </header>
  <body>
    <div>
      <del class="discount_price-label label">12.00</del>
      <span class="price-label label">12.00</span>
    </div>
  </body>
</html>

这里我们将重复的代码封装成了 label 类，达到复用的目前。label 只是对具体、单一业务代码的抽离，下面我们更加激进一点，让它 脱离业务 成为 全局通用 的样式类，代码如下：

<html>
  <header>
    <style>
      .text-12px {
        font-size: 12px;
      }
      .leading-2 {
        line-height: 2;
      }
      .price-label {
        color: #ddd;
      }
      .discount_price-label {
        color: #000;
      }
    </style>
  </header>
  <body>
    <div>
      <del class="discount_price-label text-12px leading-2">12.00</del>
      <span class="price-label text-12px leading-2">12.00</span>
    </div>
  </body>
</html>

这里的 text-12px 和 leading-2 就是真正的 原子化，每个类就是一个 原子。这样做的好处就是，样式类脱离了具体的业务，且在大量使用 css 的时候，能让我们的代码体积更小。

总结一下：原子化 CSS 是一种将 CSS 样式分解为小的、可重用的原子（或单元）的样式表设计模式。这些原子通常是单一目的的类名，用于表示特定的样式属性，例如颜色、字体大小、边距等。通过这种方式，开发者可以组合这些原子类来创建复杂的样式，而不需要编写大量的 CSS 规则。

上面理解了什么是 原子化，那么 tailwindcss 能为我们提供什么呢？

<html>
  <body>
    <div>
      <del class="text-[#000] text-[12px] leading-2">12.00</del>
      <span class="text-[#ddd] text-[12px] leading-2">12.00</span>
    </div>
  </body>
</html>

对，你没有看错，我们不需要再手写 样式类 了。只要按照 tailwindcss 的规则在 class 属性里面填，它会为我们生成对应的样式类。

目前几种主流的几种原子化 CSS 工具有 tailwindcss、windicss、 unocss。

今天介绍的是 tailwindcss

搭建项目

初始化项目

pnpm init
# 安装tailwindcss
pnpm add tailwindcss -D
# 初始化tailwindcss，生成tailwind.config.js
npx tailwindcss init

创建文件

mkdir src && touch src/index.html && src/input.css

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      href="./output.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

配置tailwind

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

配置 script

{
  "scripts": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}

项目结构

├── README.md
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── index.html
│   ├── input.css
│   └── output.css
└── tailwind.config.js

其他配置

安装 vscode 插件

Tailwind CSS IntelliSense
Prettier - Code formatter

使用 Prettier 自动对 样式类别 进行排序

pnpm add prettier prettier-plugin-tailwindcss@0.5.14 -D
mkdir .prettierrc

配置 .prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js",
  "tailwindAttributes": ["class"]
}

配置命令
```json
{
  "scripts": {
    "format": "prettier --write ."
  }
}

字段说明

content 配置生效路径
theme
plugins

工程化-tailwindcss

tailwindcss

前言

搭建项目

其他配置