Tailwind CSS · 초급
Tailwind CSS 초급 단계에 공개된 학습 글입니다. 단계별 목표를 참고해 필요한 글부터 읽어 보세요.
단계별 학습 목표
각 단계의 학습 목표입니다. 공개된 글은 위의 단계별 링크에서 바로 볼 수 있습니다.
초급 목표
유틸리티 클래스의 조합과 반응형 기준을 익혀, 간단한 화면의 간격과 글꼴 및 배치를 일관되게 구현하는 방법을 다룹니다.
학습 주제
- 유틸리티 클래스 기초
- 간격과 타이포그래피
- 반응형과 상태 표현
중급 목표
반복되는 스타일과 상태 변형을 정리하여, 접근성을 유지하면서 여러 화면에 공통으로 쓰는 요소를 만드는 방법을 다룹니다.
학습 주제
- 컴포넌트 스타일 조합
- 테마와 토큰 활용
- 접근성과 상태 스타일
고급 목표
팀의 변경 빈도와 제품 요구를 기준으로, 유틸리티와 컴포넌트의 경계 및 디자인 토큰 운영 방식을 설계하는 방법을 다룹니다.
학습 주제
- 토큰과 테마 구조
- 스타일 추상화의 기준
- 일관성 검증과 운영
단계 안에서는 학습 순서대로 표시합니다. 선택 참고는 필수 진도에 포함하지 않습니다.
초급 7개
안내 · 필수 길잡이
Tailwind CSS 실전 로드맵: 기본·반응형·상태·동적 클래스 학습 순서학습 1 / 15 · 필수 학습
Tailwind CSS 기본 클래스 사용법: text font bg spacing 익히기학습 2 / 15 · 필수 학습
Tailwind border flex 사용법: 레이아웃 기본 클래스 기준학습 3 / 15 · 필수 학습
Tailwind CSS Preflight 기준: 기본 스타일 초기화가 생기는 이유학습 4 / 15 · 필수 학습
Tailwind CSS 반응형 클래스 사용법: sm md lg 기준 잡기학습 5 / 15 · 필수 학습
Tailwind CSS arbitrary value 차이: 대괄호 문법 사용 기준 잡기학습 6 / 15 · 필수 학습
Tailwind CSS v4 설치: React Vite 프로젝트 연결과 첫 클래스 적용
이 단계의 학습 글은 준비 중입니다.
개념·참고 2개
참고 1 / 7 · 선택 참고
Tailwind CSS 임의 값 공백 처리: 대괄호 문법이 깨질 때 해결하기참고 5 / 7 · 선택 참고
shadcn/ui No import alias found 오류 해결: tsconfig 설정
이 단계의 학습 글은 준비 중입니다.