檬味博客 » 问答 » tailwind？unocss？青藤之恋小程序样式方案思考

tailwind？unocss？青藤之恋小程序样式方案思考

在开发一个组件的样式时，我们常常采用在 HTML 或 JSX 结构中添加具有语义化的 class 类名，并在 CSS 中定义对应类的样式。这种做法被称为 Semantic CSS（语义化CSS），是最常见、最常规的规范。它强调关注点分离，使结构与样式各司其职，使结构更具语义化。然而，在这种规范下，我们也面临着一些痛...
tailwind？unocss？青藤之恋小程序样式方案思考
从 Semantic CSS（语义化CSS）的角度出发

在开发一个组件的样式时，我们常常采用在 HTML 或 JSX 结构中添加具有语义化的 class 类名，并在 CSS 中定义对应类的样式。这种做法被称为 Semantic CSS（语义化CSS），是最常见、最常规的规范。它强调关注点分离，使结构与样式各司其职，使结构更具语义化。然而，在这种规范下，我们也面临着一些痛点，例如：

Atomic/Utility-First CSS（原子化/功能优先 CSS）

与 Semantic CSS 相比，Atomic/Utility-First CSS（原子化/功能优先 CSS）则提供了一个由不同功能类组成的工具箱，我们可以将它们混合在一起应用在 HTML 元素上。对于 Atomic CSS（原子 CSS）来说，在物理世界中，原子是一般物质的最小单位，而在 CSS 世界中，则是一个类中只有唯一的 CSS 规则。

Tailwind CSS

Tailwind CSS 是一种基于 Atomic/Utility-First CSS 规范的 CSS 框架，非常受欢迎。

基于 Atomic/Utility-First CSS 规范的 Tailwind CSS 框架具有以下优点：

但同时也存在一些问题：

UnoCSS

Tailwind CSS 在过去几年广受欢迎，而近两年 UnoCSS 也在这个领域脱颖而出。作为高性能且极具灵活性的即时原子化 CSS 引擎，UnoCSS 并非要替代 Tailwind CSS，而是从另一个角度使原子化 CSS 在业务中融合得更加完美。

UnoCSS 的作者来自 Vite 团队，我认为正是由于他是 Vite 的开发者，对于工程化构建具有很高的敏感度，才能创造出将原子化 CSS 与前端工程融合到极致的 UnoCSS。

那么 UnoCSS 做了哪些事呢：

青藤样式方案小程序不仅是小程序，青藤之恋还有跨端投放 H5 及中后台（React 项目），为了保证项目的平顺性和一致性，也需要应用 Tailwind。2024-08-11
mengvlog 阅读 28 次 更新于 2025-08-05 16:43:15 我来答关注问题0
1 个回答檬味博客专题活动
  • 翡希信息咨询 tailwind?unocss?青藤之恋小程序样式方案思考

    Tailwind CSS 和 UnoCSS 是两种不同的 CSS 框架，均基于 Atomic/UtilityFirst CSS 规范，适用于青藤之恋小程序等项目的样式方案。以下是关于两者的详细对比以及青藤之恋小程序样式方案的思考：Tailwind CSS： 优点： 原子化：将 CSS 规则拆分成最小的、可复用的部分，方便快速构建页面。 功能优先...

  • 文暄生活科普 tailwind?unocss?青藤之恋小程序样式方案思考

    UnoCSS Tailwind CSS 在过去几年广受欢迎，而近两年 UnoCSS 也在这个领域脱颖而出。作为高性能且极具灵活性的即时原子化 CSS 引擎，UnoCSS 并非要替代 Tailwind CSS，而是从另一个角度使原子化 CSS 在业务中融合得更加完美。UnoCSS 的作者来自 Vite 团队，我认为正是由于他是 Vite 的开发者，对于...

  • 翡希信息咨询 手摸手创建一个 Vue + Ts 项目(三) —— 使用 UnoCSS 来调整布局样式

    在main.ts中引入index.css，确保样式被应用到项目中。解决布局组件高度未撑满的问题：在BasicLayout.vue组件上添加样式style="height: 100%"，确保布局组件的高度撑满其父容器。使用UnoCSS调整样式：UnoCSS不提供样式，需加载预设实现功能。本项目使用默认预设，它尝试提供流行框架的共同超集。查阅Tailwind ...

  • 文暄生活科普 手摸手创建一个 Vue + Ts 项目(三) —— 使用 UnoCSS 来调整布局样式

    在main.ts中引入index.css。接下来，解决布局组件高度未撑满的问题，在BasicLayout.vue组件上添加样式：style="height: 100%"。刷新页面，可以看到高度和宽度已撑满。使用UnoCSS提供一种不同的样式调整方法。UnoCSS不提供样式，需加载预设实现功能。本项目使用默认预设，尝试提供流行框架（如Tailwind CSS）...

  • 阿暄生活 uniapp+vue3开发微信小程序踩坑集

    推荐方案：使用原子化CSS，如unocss，以解决关注点分离带来的困扰，提升开发效率。UnoCSS具有按需生成class、规则编写更灵活等优势，且完全兼容Tailwind CSS。不支持的特性：注意点：uniapp不支持Vue的render、inlinetemplate、XTemplates、keepalive、transition等特性。页面跳转：注意点：理解relaunch与redirectTo...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部