Tailwind 速查

布局

container block inline inline-block flex grid hidden static relative absolute fixed sticky overflow-hidden overflow-auto z-10 z-50

Flexbox

flex-row flex-col flex-wrap flex-nowrap flex-1 flex-auto flex-none items-start items-center items-end items-stretch justify-start justify-center justify-end justify-between justify-around gap-1 gap-2 gap-4 gap-6 gap-8 grow shrink

Grid

grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-6 grid-cols-12 col-span-1 col-span-2 col-span-full row-span-1 row-span-2 auto-cols-auto auto-rows-auto

间距

p-0 p-1 p-2 p-4 p-6 p-8 px-4 py-2 m-0 m-4 m-auto mx-auto my-4 mt-4 mb-4 space-x-2 space-y-4

尺寸

w-full w-screen w-1/2 w-1/3 w-64 w-auto h-full h-screen h-64 max-w-sm max-w-md max-w-lg max-w-xl max-w-2xl max-w-7xl

排版

text-xs text-sm text-base text-lg text-xl text-2xl text-3xl font-light font-normal font-medium font-semibold font-bold text-left text-center text-right leading-tight leading-normal leading-relaxed tracking-wide truncate line-clamp-2 line-clamp-3

颜色

text-white text-black text-gray-500 text-gray-900 text-blue-500 text-green-500 text-red-500 text-yellow-500 bg-white bg-black bg-gray-100 bg-blue-500 bg-green-500 bg-red-500 bg-transparent

边框

border border-0 border-2 border-4 border-solid border-dashed border-gray-200 rounded rounded-sm rounded-md rounded-lg rounded-xl rounded-full

效果与过渡

shadow shadow-sm shadow-md shadow-lg shadow-xl opacity-0 opacity-50 opacity-100 transition duration-150 duration-300 ease-in-out hover:opacity-80 hover:scale-105 cursor-pointer select-none

响应式前缀

sm:flex md:grid lg:block xl:hidden 2xl:text-xl sm:p-4 md:p-8 lg:p-12 dark:bg-gray-900 dark:text-white
已复制!

点击任意类名复制到剪贴板。Tailwind CSS v3参考。完整文档请访问 tailwindcss.com