无需离开您的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>
实现效果如下
在线示例:https://mouday.github.io/front-end-demo/tailwindcss-demo.html
单位尺寸转换对应:
https://tailwindcss.com/docs/customizing-spacing