Tailwind CSS

학습 목표: 기본·반응형·상태 유틸리티와 동적 클래스 감지 기준을 적용합니다. 선수 지식: CSS 박스 모델, Flex/Grid, 미디어 쿼리를 먼저 익힙니다. 초급·중급·고급의 목표를 확인하고 현재 공개된 글부터 학습하세요. 빈 단계는 계획을 유지하며 내용을 차례로 보강합니다.

단계별 학습 목표

각 단계의 학습 목표입니다. 공개된 글은 위의 단계별 링크에서 바로 볼 수 있습니다.

초급 목표

유틸리티 클래스의 조합과 반응형 기준을 익혀, 간단한 화면의 간격과 글꼴 및 배치를 일관되게 구현하는 방법을 다룹니다.

학습 주제

  • 유틸리티 클래스 기초
  • 간격과 타이포그래피
  • 반응형과 상태 표현

중급 목표

반복되는 스타일과 상태 변형을 정리하여, 접근성을 유지하면서 여러 화면에 공통으로 쓰는 요소를 만드는 방법을 다룹니다.

학습 주제

  • 컴포넌트 스타일 조합
  • 테마와 토큰 활용
  • 접근성과 상태 스타일

고급 목표

팀의 변경 빈도와 제품 요구를 기준으로, 유틸리티와 컴포넌트의 경계 및 디자인 토큰 운영 방식을 설계하는 방법을 다룹니다.

학습 주제

  • 토큰과 테마 구조
  • 스타일 추상화의 기준
  • 일관성 검증과 운영

Tailwind CSS 학습 목록

읽음 — / 전체 23개 · 필수 16개

학습 시작

단계 안에서는 학습 순서대로 표시합니다. 선택 참고는 필수 진도에 포함하지 않습니다.

초급 7개

  1. 안내 · 필수 길잡이

    Tailwind CSS 실전 로드맵: 기본·반응형·상태·동적 클래스 학습 순서

  2. 학습 1 / 15 · 필수 학습

    Tailwind CSS 기본 클래스 사용법: text font bg spacing 익히기

  3. 학습 2 / 15 · 필수 학습

    Tailwind border flex 사용법: 레이아웃 기본 클래스 기준

  4. 학습 3 / 15 · 필수 학습

    Tailwind CSS Preflight 기준: 기본 스타일 초기화가 생기는 이유

  5. 학습 4 / 15 · 필수 학습

    Tailwind CSS 반응형 클래스 사용법: sm md lg 기준 잡기

  6. 학습 5 / 15 · 필수 학습

    Tailwind CSS arbitrary value 차이: 대괄호 문법 사용 기준 잡기

  7. 학습 6 / 15 · 필수 학습

    Tailwind CSS v4 설치: React Vite 프로젝트 연결과 첫 클래스 적용

중급 8개

  1. 학습 7 / 15 · 필수 학습

    Tailwind CSS Grid 실무 레이아웃 정리: 카드 목록부터 대시보드까지

  2. 학습 8 / 15 · 필수 학습

    Tailwind CSS 상태 variant 사용법: hover focus aria data 기준 잡기

  3. 학습 9 / 15 · 필수 학습

    Tailwind CSS group peer has 차이: 상태 기준으로 고르는 방법

  4. 학습 10 / 15 · 필수 학습

    Tailwind CSS dark 사용법: 다크 모드 구현 기준 잡기

  5. 학습 11 / 15 · 필수 학습

    Tailwind CSS @theme 사용법: 변수와 디자인 토큰 구분하기

  6. 학습 12 / 15 · 필수 학습

    Tailwind Container Query 사용법: 부모 너비 기준 반응형 처리

  7. 학습 13 / 15 · 필수 학습

    React Tailwind className 정리: 조건부·variant·가독성 기준

  8. 학습 14 / 15 · 필수 학습

    Tailwind CSS @apply 사용 기준: @utility와 custom variant 구분하기

고급 1개

  1. 학습 15 / 15 · 필수 학습

    Tailwind CSS 동적 클래스 해결: 감지 원리와 @source 사용법

개념·참고 7개

  1. 참고 1 / 7 · 선택 참고

    Tailwind CSS 임의 값 공백 처리: 대괄호 문법이 깨질 때 해결하기

  2. 참고 2 / 7 · 선택 참고

    Tailwind CSS transition, animation, motion-reduce 사용 기준 정리

  3. 참고 3 / 7 · 선택 참고

    Tailwind CSS v4.1~v4.3 신규 유틸리티 정리

  4. 참고 4 / 7 · 선택 참고

    Radix UI와 shadcn/ui 차이: 컴포넌트를 고를 때 헷갈리는 기준 정리

  5. 참고 5 / 7 · 선택 참고

    shadcn/ui No import alias found 오류 해결: tsconfig 설정

  6. 참고 6 / 7 · 선택 참고

    Tailwind CSS flex 레이아웃 깨질 때 확인할 것

  7. 참고 7 / 7 · 선택 참고

    Tailwind CSS 클래스 적용 안 됨 해결 순서
읽음 기록 설정

읽음 기록은 이 브라우저에만 저장됩니다.

전체 기술 학습 가이드