前端样式库推广——TailwindCss

官方网址： https://tailwindcss.com/docs/installation/using-vite
中文官方文档：https://www.tailwindcss.cn/
github地址：tailwindcss
正在使用tailwindcss的网站：https://tailwindcss.com/showcase

一看github，竟然有高达86.5+stars，这库不简单
它就是近几年很流行的 “原子化CSS框架” ——TailwindCss！

一、TailwindCss功能展示

相信看了上图+以下效果之后，就了解这个库了，实质就是对于css写法进行优化的库，让开发重点关注html页面编写，不必将关注点切到css文件。

二、有什么优势？

1. 原子化css+高度定制化

原子化即指单一原则，针对最小单位的css，它只对应一条具体的样式。
而TailwindCSS其实就是一个聚合了很多个原子类的库，提供了大量系统预设类名。

2. 支持伪类写法

例如hover:、focus:等，效果如下：
而平常使用的内联Style中无法支持 ，也就是 hover: 等状态下的样式，必须在另外的css文件中编写。

3. 强大的响应式

TailwindCSS 提供响应式处理，例如sm:，md:，lg:，实现在不同宽度屏幕下的样式
产物单位会自动转换成rem，当然也可以是其它比如em或者px等。

tailwindcss vs 手写媒体查询
同样是实现多列布局对各个屏幕尺寸大小的适配，左右对比一下，可见优劣

• display: grid: 使用grid布局
• grid-cols-x：表示每行有x个

是不是少写很多行代码，懒癌党狂喜~~

对于需要特定数值的样式如宽高、字体大小和边距等，TailwindCSS提供的工具类默认为响应式，如 p-4 实际上是padding: 1rem。而对于特定值可以这样用：p-[12px]，bg-[#fff]。
也可以在配置文件手动预设一些值。

三、相关辅助插件推荐

1. Tailwind CSS IntelliSense 补全+提示

官方给用户贴心地提供了对应的vscode插件，可以快速选择并提示css原用法：

2. 加强可读性-headwind （vscode）

• 竖着写
• headwind自动排序className
  

3. clsx的额外拓展

• 基本拼接：将多个类名直接拼接

import clsx from 'clsx';
const MyComponent = () => {
    const classes = clsx('class1', 'class2');
    return <div className={classes}>{'这是一个带有组合类名的元素'}</div>;
};
export default MyComponent;

• 条件拼接：可根据特定条件动态拼接，默认为true时拼接false时不做拼接

import clsx from 'clsx';
const MyButtonComponent = ({ isActive }) => {
    const classes = clsx('button', { 'active': isActive });
    return <button className={classes}>{'这是一个按钮'}</button>;
};
export default MyButtonComponent;

• 多条件拼接：支持同时拼接多个条件的类名，原理同上

import clsx from 'clsx';
const MyButtonComponent = ({ isActive, isLarge }) => {
    const classes = clsx('button', {
        'active': isActive,
        'large': isLarge
    });
    return <button className={classes}>{'这是一个按钮'}</button>;
};
export default MyButtonComponent;

4. tailwind-merge

解决多个原子CSS结合时的冲突，可以清除冗余的类名，只保留最后生效的。

import clsx from 'clsx';
import { twMerge } from 'tailwind-merge'

const MyComponent = () => {
    const classes = twMerge('px-2 py-1 bg-red hover:bg-green', 'p-3 bg-[#ffffff]');
    
    return <div className={classes}>{'组合类'}</div>;
    /*'hover:bg-green p-3 bg-[#ffffff]'*/
};
export default MyComponent;

可与clsx结合使用：twMerge(clsx( ))

四、实战可能的问题

1. Design tokens 与 Tailwindcss 结合使用

design-tokens.json：

{
    "color": {
        "primary": "#4f46e5",
        "secondary": "#ec4899"
    },
    "spacing": {
        "small": "8px",
        "medium": "16px",
        "large": "24px"
    }
}

配置文件tailwindcss.config.js

const designTokens = require('./design-tokens.json');

module.exports = {
  theme: {
    colors: {
      primary: designTokens.color.primary,
      secondary: designTokens.color.secondary
    },
    spacing: {
      sm: designTokens.spacing.small,
      md: designTokens.spacing.medium,
      lg: designTokens.spacing.large
    }
  }
};

2. 动态样式

• 控制单条样式
  例如用isTrue控制border和py

const Button = ({ isTrue }) => {
    return (
        <button
            className={`
                ${isTrue ? 'border-[1px]' : 'border-2'}
                ${isTrue ? 'py-1' : 'py-3'}
            `}
        >
           label
        </button>
    )
}

• 失效写法
  此时使用变量来控制盒子宽度和字体颜色就会失效了：

const Div = ({ width, color }) => {
    return <div className={`w-[${width}px] text-${color}`}></div>
}

以上写法暂不支持，样式会失效，是因为TailwindCSS是在构建时按需生成类名以及相应的样式，这种运行时生成的无法被检测到。

正确写法：

const Div = ({ width, color }) => {
    return <div className="..." style={{ width, color }}></div>
}

3. 公共样式的复用问题

设计初衷：不要过早抽象，相对独立维护

官方的推荐做法
重复多使用jsx+循环，也可以利用代码编辑器快速同时编辑多个className

总结

tailwindcss：

1. 关注当前页面，不必关注类名
2. 高效处理响应式和伪类
3. 与内联style类似，各样式独立，不必担心复用问题，维护性强

tip:

常用工具类普遍好记，如grid就是 display: gird , relative就是 position: relative ， 但是有一些css和tailwindcss写法出入比较大的，比如width，写法 w-[100px]
可以边写边在官方文档ctrl+k查找，基本两遍也就记住了~