0
点赞
收藏
分享

微信扫一扫

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


无需离开您的HTML,即可快速建立现代网站。
Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。

文档:

  • ​​https://tailwindcss.com/​​
  • ​​https://www.tailwindcss.cn/​​ 翻译落后于英文文档

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>

实现效果如下

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


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

单位尺寸转换对应:

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

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


举报

相关推荐

0 条评论