css: Tailwind CSS一个功能类优先的 CSS 框架

简介: css: Tailwind CSS一个功能类优先的 CSS 框架

无需离开您的HTML,即可快速建立现代网站。

Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。

文档:

CDN引入示例代码

实现一个grid布局

 <!-- 3.1.8 -->
 <script src="https://cdn.tailwindcss.com"></script>
 <div class="w-[800px] mx-auto mt-5 grid grid-cols-3 gap-y-4">
   <div class="w-[100px] h-[100px] border-2 text-center text-4xl leading-[100px]">1</div>
   <div class="w-[100px] h-[100px] border-2 text-center text-4xl leading-[100px]">2</div>
   <div class="w-[100px] h-[100px] border-2 text-center text-4xl leading-[100px]">3</div>
   <div class="w-[100px] h-[100px] border-2 text-center text-4xl leading-[100px]">4</div>
   <div class="w-[100px] h-[100px] border-2 text-center text-4xl leading-[100px]">5</div>
   <div class="w-[100px] h-[100px] border-2 text-center text-4xl leading-[100px]">6</div>
 </div>

实现效果如下

image.png

在线示例:https://mouday.github.io/front-end-demo/tailwindcss-demo.html

单位尺寸转换对应:

https://tailwindcss.com/docs/customizing-spacing

image.png

image.png

image.png

相关文章
|
5月前
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
本文展示了AI编程从概念到实践的革命性突破,以一个CSS代码优化工具为例,说明AI如何在3分钟内完成传统开发需2天的任务。文章详细解析了AI在垂直领域工具开发、高频技术场景覆盖及代码维护优化中的应用,并探讨了智能上下文感知、模式识别优化等核心功能。同时,面对语义理解与逻辑验证等挑战,AI结合开发者补充规则,实现人机协同。最终总结指出,AI编程并非取代开发者,而是助力效率提升,推动“需求即代码”的未来方向,开启软件开发新纪元。
92 4
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
|
5月前
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
这是一个由AI生成的完整CSS渐变生成器项目,具备可视化交互、实时预览和代码生成功能。通过HTML、CSS和JavaScript实现,支持线性与径向渐变,提供随机生成和复制代码功能。项目展示了AI编程助手在快速原型开发、教学辅助和设计系统集成中的应用价值。其智能上下文感知、全链路代码生成和决策能力,为开发者提供了高效工具支持,助力从样板代码中解放创造力。附带优化方向如增强渐变类型、智能推荐系统及工程化改进,进一步拓展了应用场景。
84 2
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
75 1
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
92 5
|
12月前
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
437 0
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
637 1
|
前端开发
类抖音logo的光影之旅:CSS动画效果,让标志更具吸引力!
类抖音logo的光影之旅:CSS动画效果,让标志更具吸引力!
|
前端开发
解锁CSS神秘面纱:深度剖析类选择器,掌握前端设计的绝密武器!
解锁CSS神秘面纱:深度剖析类选择器,掌握前端设计的绝密武器!
|
前端开发
CSS类如何使用?
【6月更文挑战第30天】CSS类如何使用?
78 2