专栏名称: 奇舞精选
《奇舞精选》是由奇舞团维护的前端技术公众号。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送汇总周刊内容。
目录
今天看啥  ›  专栏  ›  奇舞精选

深度解析 tailwindcss 设计源规则

奇舞精选  · 公众号  ·  · 2024-07-30 18:34
    

主要观点总结

本文介绍了如何对tailwindcss进行自定义设置,包括理解其源规则、属性缩写与值缩写的映射关系,以及如何调整映射值以适应团队的设计要求。还讨论了tailwindcss的设计语言与技术语言的区别,以及如何理解并运用其设计语言。

关键观点总结

关键观点1: Tailwindcss的自定义设置

通过定义css变量来覆盖默认映射值,在tailwind.config.js中修改回退值,以适应团队的设计要求。

关键观点2: Tailwindcss的映射关系

包括字符缩写与css属性名之间的映射,以及值缩写与css属性值之间的映射。理解这种映射关系是成为资深tailwindcss高手的关键。

关键观点3: Tailwindcss的设计语言与技术语言的区别

Tailwindcss的默认映射值融入了设计语言,而非纯技术语言,这可能导致理解和运用上的困难。理解并适应这种设计语言是紧密合作的关键。

关键观点4: 其他CSS工具如unocss的介绍

Unocss允许通过正则匹配任意px数值,而tailwindcss更提倡约定一组固定的数组,在这组固定的数值上做能力的配置。


免责声明

免责声明:本文内容摘要由平台算法生成,仅为信息导航参考,不代表原文立场或观点。 原文内容版权归原作者所有,如您为原作者并希望删除该摘要或链接,请通过 【版权申诉通道】联系我们处理。

原文地址:访问原文地址
总结与预览地址:访问总结与预览
推荐产品:   推荐产品
文章地址: 访问文章快照