🍃

tailwind memo

2024/05/31に公開

tailwind を長年避けて styled-components のようなライブラリをつかってましたが、 Next.js との連携や昨年から案件での採用が増え今はよくつかうようになりました。
Tailwind CSS Docs で表現したい css shorthand をひたすら検索してます。とりあえずでつかえそうなクラスをメモしてみました。

classes

base classes

  • width: ?pxw-[?px] (max-w-[300px] min-h-[1lh] で最大最小)
  • height: ?pxh-[?px] (w-full w-screen h-dvh で 100%, 100vw, 100dvh)
  • background: #?bg-[#?] (bg-transparent shadow backdrop-blur)
  • margin: ?px ?pxm-[?px_?px] (mx-auto my-auto で上下左右)
  • padding: ?px ?pxp-[?px_?px] (pt-1 pr-2 pb-3 pl-4 で上下左右)
  • border-radius: ?pxrounded-[?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: ?pxtext-[?px]
  • font-family: ?font-? (font-sans, font-serif, font-mono)
  • font-weight: ?font-[?] (font-normal, font-bold)
  • line-height: ?pxleading-[?px]
  • letter-spacing: ?pxtracking-[?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

  • :activeactive:outline
  • :hoverhover:underline
  • :focusfocus:shadow
  • :focus-withinfocus-within:shadow-lg
  • :focus-visiblefocus-visible:shadow-xl
  • .peer:focus-visiblepeer-focus-visible:shadow-2xl
  • .peer:checkedpeer-checked:hidden
  • :first-childfirst:pt-0
  • :last-childlast:pb-0
  • :has(input:disabled)has-[input:disabled]:border
レスポンシブ max-lg:col or 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.125remrounded-sm
  • 4px or 0.250remrounded
  • 6px or 0.375remrounded-md
  • 8px or 0.500remrounded-lg
  • 12px or 0.75remrounded-xl
  • 16px or 1.0remrounded-2xl
  • 24px or 1.5remrounded-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
m-? ? * 1/4rem or ? * 4px : Size - Tailwind CSS

  • size-0 ~ 14 まではあります (size-13 はありません)
    • 0pxsize-0
    • 4px or 0.25remsize-1
    • 8px or 0.50remsize-2
    • 12px or 0.75remsize-3
    • 16px or 1.00remsize-4
    • 20px or 1.25remsize-5
    • 24px or 1.50remsize-6
    • 28px or 1.75remsize-7
    • 32px or 2.00remsize-8
    • 36px or 2.25remsize-9
    • 40px or 2.50remsize-10
    • 44px or 2.75remsize-11
    • 48px or 3.00remsize-12
    • 56px or 3.50remsize-14
  • 0.25, 0.5, 1.5, 2.5, 3.5 は小数点があります(つかわないかもです、、、)
    • 1pxsize-px
    • 2px or 0.125remsize-0.5
    • 6px or 0.375remsize-1.5
    • 10px or 0.625remsize-2.5
    • 14px or 0.875remsize-3.5
  • 16 + 4n ... 96 まであります(つかいにくいかもです、、、)
    • 64px or 4remsize-16
    • 80px or 5remsize-20
    • 96px or 6remsize-24
    • 112px or 7remsize-28
    • 128px or 8remsize-32
    • 144px or 9remsize-36
    • 160px or 10remsize-40
    • 176px or 11remsize-44
    • 192px or 12remsize-48
    • 208px or 13remsize-52
    • 224px or 14remsize-56
    • 240px or 15remsize-60
    • 256px or 16remsize-64
    • 288px or 18remsize-72
    • 320px or 20remsize-80
    • 384px or 24remsize-96

Discussion