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>

实现效果如下

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

单位尺寸转换对应：

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