tailwind
を長年避けて styled-components
のようなライブラリをつかってましたが、 Next.js との連携や昨年から案件での採用が増え今はよくつかうようになりました。
Tailwind CSS Docs で表現したい css shorthand をひたすら検索してます。とりあえずでつかえそうなクラスをメモしてみました。
classes
base classes
width: ?px
→w-[?px]
(max-w-[300px] min-h-[1lh]
で最大最小)height: ?px
→h-[?px]
(w-full w-screen h-dvh
で 100%, 100vw, 100dvh)background: #?
→bg-[#?]
(bg-transparent shadow backdrop-blur
)margin: ?px ?px
→m-[?px_?px]
(mx-auto my-auto
で上下左右)padding: ?px ?px
→p-[?px_?px]
(pt-1 pr-2 pb-3 pl-4
で上下左右)border-radius: ?px
→rounded-[?px]
(rounded-x-2 rounded-y-4
で上下左右)border: ?px solid #?
→border-[?px] border-[#?]
(border-y-2
... で上下左右)
text classes
color: #?
→text-[#?]
(text-white
,text-black
などいっぱいあります)text-align: ?
→text-?
(text-center
,text-left
,text-right
)font-size: ?px
→text-[?px]
font-family: ?
→font-?
(font-sans
,font-serif
,font-mono
)font-weight: ?
→font-[?]
(font-normal
,font-bold
)line-height: ?px
→leading-[?px]
letter-spacing: ?px
→tracking-[?px]
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
→truncate
other classes
- flex
flex flex-col gap-[?px] justify-center items-center
- grid
grid place-content-center grid-rows-3 grid-cols-[repeat(3,minmax(0,1fr))]
- display
inline inline-block block flex grid ...
- position
relative absolute fixed sticky ...
- overflow
overflow-x-hidden overflow-y-scroll
- pointer
cursor-pointer pointer-events-auto
- touch
touch-manipulation
- list
list-disc
utils
沢山便利機能があります
擬似クラス dark:md:hover:transition-all
: Handling Hover, Focus, and Other States - Tailwind CSS
:active
→active:outline
:hover
→hover:underline
:focus
→focus:shadow
:focus-within
→focus-within:shadow-lg
:focus-visible
→focus-visible:shadow-xl
.peer:focus-visible
→peer-focus-visible:shadow-2xl
.peer:checked
→peer-checked:hidden
:first-child
→first:pt-0
:last-child
→last:pb-0
:has(input:disabled)
→has-[input:disabled]:border
レスポンシブ flex-col lg:flex-row
: Responsive Design - Tailwind CSS
@media (min-width: 640px) { ... }
→sm
@media (min-width: 768px) { ... }
→md
@media (min-width: 1024px) { ... }
→lg
@media (min-width: 1280px) { ... }
→xl
@media (min-width: 1536px) { ... }
→2xl
sizes
沢山謎数値があります
border-radius 0, 2, 4, 6, 8
px と 12, 16, 24
px : Border Radius - Tailwind CSS
border-radius: 0px;
→rounded-none
2px
or0.125rem
→rounded-sm
4px
or0.250rem
→rounded
6px
or0.375rem
→rounded-md
8px
or0.500rem
→rounded-lg
12px
or0.75rem
→rounded-xl
16px
or1.0rem
→rounded-2xl
24px
or1.5rem
→rounded-3xl
9999px;
→rounded-full
font-weight font-[400] font-[700]
: Font Weight - Tailwind CSS
font-weight: 100;
→font-thin
font-weight: 200;
→font-extralight
font-weight: 300;
→font-light
font-weight: 400;
→font-normal
font-weight: 500;
→font-medium
font-weight: 600;
→font-semibold
font-weight: 700;
→font-bold
font-weight: 800;
→font-extrabold
font-weight: 900;
→font-black
z-index z-10 z-[10]
: Z-Index - Tailwind CSS
z-index: 0;
→z-0
z-index: 10;
→z-10
z-index: 20;
→z-20
z-index: 30;
→z-30
z-index: 40;
→z-40
z-index: 50;
→z-50
z-index: auto;
→z-auto
m-? ? * 1/4rem
or ? * 4px
: Size - Tailwind CSS
size-0 ~ 14
まではあります (size-13
はありません)0px
→size-0
4px
or0.25rem
→size-1
8px
or0.50rem
→size-2
12px
or0.75rem
→size-3
16px
or1.00rem
→size-4
20px
or1.25rem
→size-5
24px
or1.50rem
→size-6
28px
or1.75rem
→size-7
32px
or2.00rem
→size-8
36px
or2.25rem
→size-9
40px
or2.50rem
→size-10
44px
or2.75rem
→size-11
48px
or3.00rem
→size-12
56px
or3.50rem
→size-14
0.25, 0.5, 1.5, 2.5, 3.5
は小数点があります(つかわないかもです、、、)1px
→size-px
2px
or0.125rem
→size-0.5
6px
or0.375rem
→size-1.5
10px
or0.625rem
→size-2.5
14px
or0.875rem
→size-3.5
16 + 4n ... 96
まであります(つかいにくいかもです、、、)64px
or4rem
→size-16
80px
or5rem
→size-20
96px
or6rem
→size-24
112px
or7rem
→size-28
128px
or8rem
→size-32
144px
or9rem
→size-36
160px
or10rem
→size-40
176px
or11rem
→size-44
192px
or12rem
→size-48
208px
or13rem
→size-52
224px
or14rem
→size-56
240px
or15rem
→size-60
256px
or16rem
→size-64
288px
or18rem
→size-72
320px
or20rem
→size-80
384px
or24rem
→size-96