github 最火的css 框架 TailwindCss

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

TailwindCss中文文档 具体操作请参考文档

容器布局 Container响应式布局

<div class="container mx-auto px-4"></div>

弹性布局 Flex布局

<div class="flex flex-row ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

网格布局 Grid 布局

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>9</div>
</div>

对齐方式 Flex对齐和 Grid 对齐

<div class="flex justify-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

间距 内边距 外边距

<div class="pt-6 ...">pt-6</div>
<div class="pr-4 ...">pr-4</div>
<div class="pb-8 ...">pb-8</div>
<div class="pl-2 ...">pl-2</div>

尺寸 高 和 宽

<div class="w-24 min-w-full md:min-w-0 ..."></div>

排版 html css 排版的基本写法

<p class="text-xs ...">The quick brown fox ...</p>

背景 背景 背景图片的写法

<div class="bg-fixed ..." style="background-image: url(...)"></div>

边框 盒子边框的写法

<div class="rounded-sm ..."></div>
<div class="rounded ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>

特效 阴影和透明度

<div class="shadow-sm ..."></div>
<div class="shadow ..."></div>
<div class="shadow-md ..."></div>
<div class="bg-light-blue-600 opacity-100 ..."></div>
<div class="bg-light-blue-600 opacity-75 ..."></div>
<div class="bg-light-blue-600 opacity-50 ..."></div>

表格 边框和布局

<table class="border-separate border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>

动画 动画的过度和转化

<button class="transition duration-500 ease-in-out bg-blue-600 hover:bg-red-600 transform hover:-translate-y-1 hover:scale-110 ...">Hover me</button>
<img class="transform rotate-45 ...">
<img class="transform skew-y-12 ...">
<img class="transform scale-50 ...">
<img class="transform translate-x-4 translate-y-4 ...">

交互 鼠标的交互事件

<div class="cursor-auto ...">
  Hover over this text
</div>