레이아웃# display  - https://tailwindcss.com/docs/displayclassCSSblockdisplay: blockinline-blockdisplay: inline-blockflexdisplay: flextabledisplay: tablegriddisplay: gridhiddendisplay: none # object-fit  - 태그 내 이미지 크기 맞춤 설정  - https://tailwindcss.com/docs/object-fitclassCSSobject-containobject-fit: contain;object-coverobject-fit: cover;object-fillobject-fit: fill;object-noneobject-fit: none;object-..

※ 내에 viewport 메타 태그가 포함되어 있는지 확인미디어 쿼리 적용하기중단점 접두사최소 너비CSSsm640px@media (min-width: 640px) { ... }md768px@media (min-width: 768px) { ... }lg1024px@media (min-width: 1024px) { ... }xl1280px@media (min-width: 1280px) { ... }2xl1536px@media (min-width: 1536px) { ... } # 특정 범위를 설정해서 적용하기 ...ModifierCSSmax-sm@media not all and (min-width: 640px) { ... }max-md@media not all and (min-width: 768px) { ..

- 내장된 유틸리티 클래스 외에도 사용자가 직접 커스텀 유틸리티 클래스를 만들어 사용할 수 있음 테마 사용자 정의  - 색상, 크기 등의 항목을 재정의하거나 새로 생성할 수 있음  - tailwind.config.js  - https://tailwindcss.com/docs/thememodule.exports = { theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', }, colors: { 'blue': '#1fb6ff', 'purple': '#7e5bef', 'pink': '#ff49db', 'orange': '#ff7849', ..

Tailwind CSS  - 유틸리티 기반의 CSS 프레임워크  - CSS를 직접 작성하지 않고도, 유틸리티 클래스를 사용하여 사용자 정의 디자인을 구축할 수 있음  - https://tailwindcss.com/   가상 클래스  - https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-class-reference # 해당 요소의 상태에 따라 클래스 적용하기  - hover, focus, active Save changes# 해당 요소의 자식요소에 클래스 적용하기  - first, last, odd, even, only-child, first-of-type, ... ... ...# 폼 상태 속성에 따라 클래스 적용하기  - required..