前端样式库推广——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

• 一、TailwindCss功能展示
• 二、有什么优势？
• • 1. 原子化css+高度定制化
  • 2. 支持伪类写法
  • 3. 强大的响应式
  • 三、相关辅助插件推荐
  • • 1. Tailwind CSS IntelliSense 补全+提示
    • 2. 加强可读性-headwind （vscode）
    • 3. clsx的额外拓展
    • 4. tailwind-merge
    • 四、实战可能的问题
    • • 1. Design tokens 与 Tailwindcss 结合使用
      • 2. 动态样式
      • 3. 公共样式的复用问题
      • 总结

        一、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 classes}{'这是一个带有组合类名的元素'};
              };
              export default MyComponent;
              

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

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

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

                  import clsx from 'clsx';
                  const MyButtonComponent = ({ isActive, isLarge }) => {
                      const classes = clsx('button', {
                          'active': isActive,
                          'large': isLarge
                      });
                      return classes}{'这是一个按钮'};
                  };
                  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 classes}{'组合类'};
                      /*'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 (
                            `
                                    ${isTrue ? 'border-[1px]' : 'border-2'}
                                    ${isTrue ? 'py-1' : 'py-3'}
                                `}
                            
                               label
                            
                        )
                    }
                    

                    • 失效写法

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

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

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

                      正确写法：

                      const Div = ({ width, color }) => {
                          return { width, color }}
                      }
                      

                      3. 公共样式的复用问题

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

                      官方的推荐做法

                      重复多使用jsx+循环，也可以利用代码编辑器快速同时编辑多个className

                      

                      总结

                      tailwindcss：

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

                      tip:

                      常用工具类普遍好记，如grid就是 display: gird , relative就是 position: relative ， 但是有一些css和tailwindcss写法出入比较大的，比如width，写法 w-[100px]

                      可以边写边在官方文档ctrl+k查找，基本两遍也就记住了~