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

Tailwind CSS 学习笔记(一)

一、简介

Tailwind CSS是一个工具优先的CSS 框架,只需书写HTML 代码,无需书写CSS,即可快速构建美观的网站。


二、优点

1、简洁、规整,避免了随意取类名

        Tailwind CSS 的工具类(Utility classes) 能够为你提供一套约束系统,避免让你的样式表中出现随意的取值。它让颜色、间距、排版、阴影以及一切取值保持一致,并最终形成一个精心构建的设计系统

2、灵活性强、你所想地就能实现

        由于Tailwind 抽象层级较低,因此它从不鼓励将同一个设计应用到两个网站上。即使使用相同的调色板(color palette) 和尺寸设置,也能很容易地让同样地组件,具有完全不同地外观。

3、体积小,绝不包含任何用不到地css 代码

        Tailwind 会在针对生产环境进行构建时自动删除所有未使用到地CSS 代码,也就是说你所获得地最终地 CSS 代码包地尺寸是最小地。事实上,大部分Tailwind 项目所生成地CSS 代码包都小于 10kB。

4、响应式设计贯穿整个框架

        在任何工具类前面添加一个代表屏幕尺寸地前缀,然后就能看到它神奇地作用到某个特定地断点(breakpoint) 上了。

5、支持鼠标悬停和焦点状态

        将 hover: 前缀添加到 你所要使用的 CSS 类的名称前面即可。支持 focus、 activedisabled、 focus-withinfocus-visible 以及 我们自己所创造的一些奇妙的状态,例如 group-hover

<

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

相关文章:

  • LeetCode 第11题~第13题
  • Express.js 是一个轻量级、灵活且功能强大的 Node.js Web 应用框架
  • 【保姆级教程】Windows系统+ollama+Docker+Anythingllm部署deepseek本地知识库问答大模型,可局域网多用户访问
  • 单片机开发资源分析的实战——以STM32G431RBT6为例子的单片机资源分析
  • Qt6.8实现麦克风音频输入音频采集保存wav文件
  • 代码随想录算法训练营第三十二天 | 509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯
  • 【第15届蓝桥杯】软件赛CB组省赛
  • 3 C#调用visionPro的toolblock的步骤
  • Redis——事务实现以及应用场景
  • Linux下使用cgroup限制进程IO
  • 【Godot】CanvasItem
  • 神经外科手术规划的实现方案及未来发展方向
  • vue 获取当前时间并自动刷新
  • Spring 创建bean的流程
  • java项目40分钟后token失效问题排查(40分钟后刷新页面白屏)
  • 20242817李臻《Linux⾼级编程实践》第四周
  • [spring]集成junit
  • 在 Vue 项目中引入静态图片有多种方式
  • 从Excel到搭贝的转变过程
  • VSTO(C#)Excel开发13:实现定时器