tailwindcss 总结

• #css

01 响应式布局

sm 640-767px 手机屏幕
md 768-1023px 平板屏幕
lg 1024-1280px 一般的电脑屏幕
xl 1280-1535px 大屏幕
2xl 1536px-9999px 超大屏幕

网格布局实例: 一个列表，默认一行显示1个，大于1280px时一行显示2个，大于1536px时一行显示三个。

<div class="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
    <div>1</div>
    ...
    <div>100</div>
</div>

02 鼠标悬浮时样式

默认是 bg-slate-100 背景颜色，鼠标悬浮时背景颜色变成了 bg-slate-200。

<div class="bg-slate-100 hover:bg-slate-200">
    xxxxx
</div>

03 鼠标在父元素上悬浮，子元素样式变化

group/<自定义名称>
父元素 group/item
子元素 group-hover/item:visible

<li class="group/item hover:bg-slate-100">
    <a class="group/edit invisible group-hover/item:visible" href="xxxxx">
        <span class="group-hover/edit:text-gray-700">Call</span>
    </a>
</li>

04 字体大小

text-xs         // 12px
text-sm         // 14px
text-base       // 16px
text-lg         // 18px
text-xl         // 20px
text-2xl        // 24px 前面是4px，后面是6px
text-3xl        // 30px
text-4xl        // 36px 前面是6px，后面是12px
text-5xl        // 48px
text-6xl        // 60px
text-7xl        // 72px 前面是12px，后面是24px
text-8xl        // 96px 前面是24px，后面是32px
text-9xl        // 128px

还可以顺便设置行高，行高=--spacing * /<number>

text-sm/6       // 行高 = 4 * 6 = 24px
text-sm/7       // 行高 = 4 * 7 = 28px
text-sm/8       // 行高 = 4 * 8 = 32px

↶ 返回首页 ↶