Tailwind CSS
小于 1 分钟
框架内置了 Tailwind CSS,可以通过 class
来完成一些常用的样式。
VSCode 插件
在 VSCode 商店搜索 bradlc.vscode-tailwindcss
,下载插件后即可获得代码提示。
消除警告 Unknown at rule @tailwind
在 tailwind.css
文件下 Ctrl + K M 语言选择 Tailwind CSS
提示
Ctrl + K M 是一个组合快捷键,是按下 Ctrl + K 后再按 M
Tailwind CSS 文档
间距比例
Name | Size | Pixels |
---|---|---|
0 | 0px | 0px |
px | 1px | 1px |
0.5 | 0.125rem | 2px |
1 | 0.25rem | 4px |
1.5 | 0.375rem | 6px |
2 | 0.5rem | 8px |
2.5 | 0.625rem | 10px |
3 | 0.75rem | 12px |
3.5 | 0.875rem | 14px |
4 | 1rem | 16px |
5 | 1.25rem | 20px |
6 | 1.5rem | 24px |
7 | 1.75rem | 28px |
8 | 2rem | 32px |
9 | 2.25rem | 36px |
10 | 2.5rem | 40px |
11 | 2.75rem | 44px |
12 | 3rem | 48px |
14 | 3.5rem | 56px |
16 | 4rem | 64px |
20 | 5rem | 80px |
24 | 6rem | 96px |
28 | 7rem | 112px |
32 | 8rem | 128px |
36 | 9rem | 144px |
40 | 10rem | 160px |
44 | 11rem | 176px |
48 | 12rem | 192px |
52 | 13rem | 208px |
56 | 14rem | 224px |
60 | 15rem | 240px |
64 | 16rem | 256px |
72 | 18rem | 288px |
80 | 20rem | 320px |
96 | 24rem | 384px |