Skip to main content

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 or 0.125rem → rounded-sm
  • 4px or 0.250rem → rounded
  • 6px or 0.375rem → rounded-md
  • 8px or 0.500rem → rounded-lg
  • 12px or 0.75rem → rounded-xl
  • 16px or 1.0rem → rounded-2xl
  • 24px or 1.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 or 0.25rem → size-1
    • 8px or 0.50rem → size-2
    • 12px or 0.75rem → size-3
    • 16px or 1.00rem → size-4
    • 20px or 1.25rem → size-5
    • 24px or 1.50rem → size-6
    • 28px or 1.75rem → size-7
    • 32px or 2.00rem → size-8
    • 36px or 2.25rem → size-9
    • 40px or 2.50rem → size-10
    • 44px or 2.75rem → size-11
    • 48px or 3.00rem → size-12
    • 56px or 3.50rem → size-14
  • 0.25, 0.5, 1.5, 2.5, 3.5 は小数点があります（つかわないかもです、、、）
    • 1px → size-px
    • 2px or 0.125rem → size-0.5
    • 6px or 0.375rem → size-1.5
    • 10px or 0.625rem → size-2.5
    • 14px or 0.875rem → size-3.5
  • 16 + 4n ... 96 まであります（つかいにくいかもです、、、）
    • 64px or 4rem → size-16
    • 80px or 5rem → size-20
    • 96px or 6rem → size-24
    • 112px or 7rem → size-28
    • 128px or 8rem → size-32
    • 144px or 9rem → size-36
    • 160px or 10rem → size-40
    • 176px or 11rem → size-44
    • 192px or 12rem → size-48
    • 208px or 13rem → size-52
    • 224px or 14rem → size-56
    • 240px or 15rem → size-60
    • 256px or 16rem → size-64
    • 288px or 18rem → size-72
    • 320px or 20rem → size-80
    • 384px or 24rem → size-96