Tailwind를 처음 배울 때 가장 헷갈리는 두 가지가 “클래스 이름이 어떤 규칙으로 만들어지는가”와 “숫자·이름(sm, md…)이 실제로 몇 px인가”다. 이 문서는 그 두 체계를 공식 문서 기준으로 정리한다. 모든 수치는 2026-07-27에 Tailwind CSS 공식 문서로 확인한 값이다. 1 – 유틸리티 클래스 체계 유틸리티 클래스는 한 가지 스타일만 담당하는 클래스다. text-center는 글자 가운데 정렬 하나, p-4는 안쪽 … 더 읽기
이 문서는 Tailwind CSS로 상자 배치(레이아웃)와 화면 크기별 디자인(반응형)을 실습하는 문서다. HTML 기본 태그(div, h1, a)를 써 본 사람이 대상이고, CSS 파일을 따로 만들지 않고 클래스 이름만으로 화면을 만든다. 끝까지 따라 하면 화면 너비에 따라 카드가 1열에서 3열로 바뀌는 웹 페이지 한 장이 결과물로 남는다. 1 – Tailwind CSS와 실습 준비 Tailwind CSS는 미리 만들어 … 더 읽기
Tailwind CSS 보통 웹사이트를 꾸밀 때는 별도의 CSS 파일에 코드를 길게 작성해야 한다. 하지만 Tailwind는 “이미 만들어진 태그(Class)”를 HTML에 바로 붙여서 디자인하는 방식이다. 테일윈드 공식 테일윈드 치트시트 공식테일윈드 피그마 스타일파일 테일윈드 디자인토큰 생성기 피그마 플러그인 1. Basics — 설치 NPM 설치 (Vite 기준) 터미널에 아래 명령어 입력 npm install tailwindcss @tailwindcss/vite vite.config.js 파일에 아래 코드 … 더 읽기
