快速掌握原子化CSS框架：Tailwindcss

背景

• 我们平时写css的方式可以是原生式写法，比如这样

<div class="aaa"></div>

.aaa {
    font-size: 16px;
    border: 1px solid #000;
    padding: 4px;
}

• 也可以是组件化写法，比如这样

<div class="aaa bbb"></div>
<div class="aaa ccc"></div>

.aaa {
    font-size: 16px;
    border: 1px solid #000;
    padding: 4px;
}
.bbb {
    color: #fff;
}
.ccc {
    color: #000;
}

• 而原子化CSS的写法是这样的

<div class="text-base p-1 border border-black border-solid"></div>

.text-base {
    font-size: 16px;
}
.p-1 {
    padding: 4px;
}
.border {
    border-width: 1px;
}
.border-black {
    border-color: black;
}
.border-solid {
    border-style: solid;
}

• 原子化CSS将类型定为小型、独立的类，每个类只负责一个具体的样式属性。这些类通常以非常简洁和描述性的命名方式命名
• 与传统的CSS编写方式相比，原子化CSS的主要特点是将样式细粒度化，以模块化的方式构建网页。这种方法的目标是最大的程度地提高样式的重用性和可维护性。通过将样式确定为小型的类型，可以轻松地把它们组合在一起来构建复杂的布局和设计

Tailwindcss使用

1、安装

• 官网：https://tailwindcss.com/docs/installation 。下面是vite + vue3 + tailwindcss实践
• 安装对等依赖项并创建 tailwind.config.js 文件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

• 创建 postcss.config.js 文件，并将 Tailwind 添加到配置文件中

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

• 在 tailwind.config.js 文件中配置模版路径，因为是在vue项目中，所以和官网有些区别

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 创建 css 文件加上下面三行代码，并在 main.js 文件中引入。下面对应的就是基础样式、组件样式、工具样式

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

• 启动服务，可以看到正确加上了样式

<div class='text-base p-1 border border-black border-solid bg-slate-200'>haole</div>

2、正式使用前要理解的问题

• 【2.1】为什么使用 tailwindcss 需要安装 postcss 和 autoprefixer

• 在Tailwind CSS中，PostCSS用于处理CSS文件并应用各种转换和插件。它负责处理CSS的自动前缀添加、嵌套、变量替换、支持CSS未来特性的转换等。通过使用PostCSS，Tailwind CSS可以提供一些强大的功能，例如自定义主题、响应式设计、浏览器兼容性等

• Autoprefixer是一个PostCSS插件，用于自动添加CSS前缀

• 【2.2】上面正常起服务后会出现一个问题，在更改原子化类名的时候，样式并没有生效，只能重启项目才能生效：

• vite版本过低，最开始创建的vite版本是 1.0.0-rc.13

• 升级最新 vite 版本体验

npm install vite@latest --save-dev
yarn add vite@latest --dev

• 安装完成后，需要在 vite.config.js 文件中进行配置。在此之前也需要安装配置 @vitejs/plugin-vue 插件

npm install @vitejs/plugin-vue --save-dev

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue()
  ]
});

3、使用

• html 举例

<div class='text-base text-slate-500 p-1 border border-black border-solid'>haole</div>

• 正常的使用就是看官网查看原子化类名然后进行使用，但是这个类名对应的值是可以在 tailwind.config.js 的 theme.extend 中进行修改的，比如下面就是修改了p-1的值，由 0.25rem 转换为 30px

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
        padding: {
            '1': '30px'
        }
    },
  },
  plugins: [],
}

• text-base是 font-size 和 line-height 两个样式，这个可以通过数组进行配置修改

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
        padding: {
            '1': '30px'
        },
        fontSize: {
            'base': ['30px', '2rem']
        }
    },
  },
  plugins: [],
}

• tailwind 提供的所有内置原子 class 都可以配置，但这些都是全局更改，临时更改可以使用 []语法。举个例子text-[25px]

<div class='text-[25px] text-slate-500 p-1 border border-black border-solid'>haole</div>

• 经常使用的 hover 样式，可以这样指定

<div class='text-[25px] hover:text-[14px] text-slate-500 p-1 border border-black border-solid'>haole</div>

• 写响应式页面的时候，可以使用md:来实现

<div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>haole</div>

• 断点的位置也可以配置

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
        padding: {
            '1': '30px'
        },
        fontSize: {
            'base': ['30px', '2rem']
        }
    },
    screens: {
        'md': '300px'
    }
  },
  plugins: [],
}

• 在开发中，我们可能为实现一个功能样式会用到很多的类型，写起来跟繁琐，比如下面这样

<template>
  <div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>我是第一个模块</div>
  <div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>我是第二个模块</div>
  <div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>我是第三个模块</div>
  <div class='text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid'>我是第四个模块</div>
</template>

• 这个问题可以通过用 @layer @apply指令来扩展解决

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

@layer components {
    .example {
        @apply text-base bg-red-500 md:bg-blue-500 p-1 border border-black border-solid
    }
}

• 然后直接使用 example 这个类名进行代替

4、增加开发体验的工具

• 原子类名太多很难记住，不能每次都去查看文档，tailwindcss 提供了 vscode 插件来解决。插件名称是 Tailwind CSS IntelliSense 。看下面是安装后的使用体验