当前位置: 首页 > article >正文

Tailwind CSS

目录

引入原因:

css增长,样式错乱

调试

规范:在class上原子化css 

特点:把class当行内style动态属性用

优点

不用命名样式

不用想并不重要的CSS变量名

缺少命名逻辑

不用撰写维护和模板【对应的独立css块】

不用不停滚动屏幕切换鼠标光标位置【vue】

打包后的css文件占用空间变小:因为在class上原子化css

CSS文件占比小(几kb),不用优化

插件:自带各种类名提示

类型长且重复多次: @layer @apply指令扩展

​编辑

类名的命名规则

参考链接


安装 - TailwindCSS中文文档 | TailwindCSS中文网

中文更友好:

Tailwind CSS 中文网

扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类(class)名,然后生成相应的样式代码并写入到一个静态 CSS 文件

引入原因:

css增长,样式错乱

多个 class 里都包含了类似的样式,但你需要写多次,css 会一直增长

css 没有模块作用域,所以可能你在这里加了一个样式,结果别的地方样式错乱了。

调试

在 chrome devtools 里可以直接看到有啥样式,而且样式之间基本没有交叉,很容易调试:

之前写法容易多个 class 的样式相互覆盖,还要确定优先级和顺序

规范:在class上原子化css 

 「Atomic/Utility-First CSS」是和「Semantic CSS 」(语义化 CSS ) 相对的一种 CSS 规范。

原子 class 样式是只是作用在某个 html 标签的

特点:把class当行内style动态属性用

优点

不用命名样式

不用想并不重要的CSS变量名

缺少命名逻辑

不用撰写维护和模板【对应的独立css块】

不用不停滚动屏幕切换鼠标光标位置【vue】

打包后的css文件占用空间变小:因为在class上原子化css

CSS文件占比小(几kb),不用优化

插件:自带各种类名提示

插件名:Tailwind CSS IntelliSense

类型长且重复多次: @layer @apply指令扩展

类名的命名规则

1.布局类:


2.flex: 相当于 display: flex;
3.grid: 相当于 display: grid;
4.justify-between: 相当于 justify-content: space-between;
5.items-center: 相当于 align-items: center;


6.间距和尺寸类:


7.m-4: 相当于 margin: 1rem;
8.p-2: 相当于 padding: 0.5rem;
9.w-1/2: 相当于 width: 50%;
10.h-8: 相当于 height: 2rem;


11.文本和颜色类:


12.text-lg: 相当于 font-size: 1.125rem;
13.text-blue-500: 相当于 color: #4299e1;

常见的文本大小类:

  • text-xs: 额外小
  • text-sm: 小
  • text-base: 基础(默认大小)
  • text-lg: 大
  • text-xl: 额外大
  • text-2xl: 双倍额外大
  • text-3xl: 三倍额外大
  • text-4xl: 四倍额外大
  • text-5xl: 五倍额外大
  • text-6xl: 六倍额外大
  • rounded-sm: 小圆角,比较小的圆角样式。
  • rounded: 中等圆角,是默认的圆角样式。
  • rounded-md: 中等圆角,稍大于默认圆角。
  • rounded-lg: 大圆角,相对较大的圆角样式。
  • rounded-xl: 非常大的圆角,比 rounded-lg 更大。
  • rounded-full: 完全圆角,将元素变成圆形。


14.响应式类:


15.lg:flex: 在大屏幕上应用 flex 样式。
16.sm:w-full: 在小屏幕上应用 width: 100%; 样式。

Tailwind CSS 的类名遵循一种基于功能和直观的命名规律。以下是一些常见的规律:

1.基础形式: 类名通常由一个或多个单词组成,描述了一个具体的样式或功能。

   <!-- 示例:字体大小 -->
   <p class="text-lg">This is a paragraph.</p>


2.缩写: 为了简化和提高可读性,Tailwind 使用缩写形式的类名。

   <!-- 示例:边距和内边距 -->
   <div class="m-4 p-2">Content</div>


3.组合类名: 你可以组合多个类名以应用多个样式。

   <!-- 示例:组合类名 -->
   <div class="flex items-center space-x-4">
     <!-- ... -->
   </div>


4.变体类名: 使用响应式前缀和状态类名可以根据屏幕大小或状态应用样式。

   <!-- 示例:响应式和状态类名 -->
   <div class="lg:flex hover:bg-gray-200">
     <!-- ... -->
   </div>


5.颜色和尺寸: 颜色和尺寸类名通常包含有关样式的信息。

   <!-- 示例:颜色和尺寸类名 -->
   <button class="bg-blue-500 text-white p-2">Click me</button>

总体而言,Tailwind CSS 的命名规律强调清晰、简洁和功能导向。这种直观的命名风格使得在 HTML 文件中阅读和理解样式更加容易。

参考链接

TailwindCSS的使用,看这一篇就够了! - 掘金

一次就能看懂的Tailwind CSS介绍 - 掘金

UnoCSS给了我一个不用tailwindcss的理由 - 掘金

为什么真的有人讨厌 TailWindCSS ? - 掘金

快速掌握 Tailwind:最流行的原子化 CSS 框架 - 掘金


http://www.kler.cn/a/227722.html

相关文章:

  • 智慧园区如何利用智能化手段提升居民幸福感与环境可持续性
  • 【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户注册
  • 知识库管理如何推动企业数字化转型与创新发展的深层次探索
  • 学习数据结构(5)单向链表的实现
  • 雅思写作(支持句)
  • DeepSeek的崛起与全球科技市场的震荡
  • 第十二篇【传奇开心果系列】Python的OpenCV技术点案例示例:视频流处理
  • 代码随想录训练营第三十四天|860.柠檬水找零406.根据身高重建队列
  • 蓝桥杯刷题day05——2023
  • Leetcode刷题笔记题解(C++):99. 恢复二叉搜索树
  • 【QT+QGIS跨平台编译】之二十:【xerces+Qt跨平台编译】(一套代码、一套框架,跨平台编译)
  • 寒假 day1
  • 实时聊天系统
  • 网络原理TCP/IP(4)
  • 老版本labelme如何不保存imagedata
  • 【TCP】四次挥手(终止连接)
  • Logback学习
  • 新手从零开始学习数学建模论文写作(美赛论文临时抱佛脚篇)
  • 修改MFC图标
  • 每日一练 | 华为认证真题练习Day178
  • 【Pwn | CTF】BUUCTF rip1
  • 编程实例分享,眼镜店电脑系统软件,配件验光管理顾客信息记录查询系统软件教程
  • SQL报错注入
  • 使用wda框架实现IOS自动化测试详解
  • MyBatis之环境搭建以及实现增删改查
  • 幻兽帕鲁服务器搭建:专用服务器设置全攻略