【九月打卡】第5天+学习定制化、高可用前台样式处理方案

课程名称：基于Vue3，打造前台+中台通用提效解决方案
课程章节：第3章 定制化、高可用前台样式处理方案——tailwindcss
主讲老师：Sunday
课程链接：https://coding.imooc.com/class/chapter/577.html#Anchor

课程内容：

今天学习的内容包括：

• 企业级项目下的css处理痛点
• 安装tailwindcss到你的项目
• tailwindcss初体验
• tailwindcss设计理念和价值体现

课程收获：

企业级项目下css处理痛点

• 统一的变量维护困难
• 大量的ClassName负担
• HTML、CSS分离造成了滚动问题
• 响应式、主题切换实现复杂

安装tailwindcss到你的项目

• 版本
  • tailwindcss@3.0.23
  • postcss@8.4.8
  • autoprefixer@10.4.2
• 执行npx tailwindcss init -p 创建tailwindcss的配置文件
  • vite默认不会安装sass要手工安装

tailwindcss的设计理念和价值体现

• 设计理念
  • 原子化css
    • 高自由度，方便复用
    • 其它css
      • 行内样式
        • 自由度高，不方便复用
      • 传统形式
        • 自由度可复用度一般
        • 需要大量的class
      • 组件形式
        • 封装性极强，语义化强，自由度差
• 价值体现
  • 高定制化
  • 高个性化
  • 高交互性
  • 传统形式，非常复杂
  • 原子化css：最合适

课程学习截图