devfinger 님의 블로그

  • 홈
  • 태그
  • 방명록

Tailwind CSS 2

Tailwind CSS class 정리 2

Tailwind CSS는 “의미를 가진 클래스 이름을 조합해서 스타일을 표현하는 방식”이야.즉, px-3, text-gray-700, focus:outline-none 같은 이름 하나하나가 이미 CSS 속성과 값을 의미하고 있어서,직접 CSS를 작성하지 않아도 돼.아래는 Tailwind CSS의 클래스 패턴과 규칙들을 정리한 테이블이야.이건 블로그에 바로 올릴 수 있는 설명체로 만들어봤어.Tailwind CSS 클래스 구조 이해하기Tailwind CSS는 다음과 같은 기본 구조 패턴을 가지고 있어. [상태접두사:]속성-값 예를 들어focus:outline-none → focus:는 상태(prefix),outline-none은 **속성(property)과 값(value)**이야.기본 구조 테이블형태예시의미..

Tailwind CSS 2025.11.10

Tailwind class 정리

클래스 해석 class="peer w-full rounded-lg border border-gray-300 bg-white px-3 pt-5 pb-2 text-gray-700 placeholder-transparent focus:border-blue-500 focus:outline-none" 클래스의미peerlabel에서 input의 상태(focus, placeholder 등)를 감지할 수 있게 해주는 트리거 역할w-full부모 너비 100%rounded-lg모서리를 크게 둥글게 (radius 약 8px)border border-gray-300테두리 색상을 연한 회색으로 지정bg-white배경색 흰색px-3 pt-5 pb-2padding (좌우 12px, 위 20px, 아래 8px 정도)text-gray..

Tailwind CSS 2025.11.10
이전
1
다음
더보기
프로필사진

devfinger 님의 블로그

devfinger 님의 블로그 입니다.

  • 분류 전체보기 (57) N
    • Flutter (3)
    • Android (0)
    • AWS (38)
    • Github (3)
    • Network (1)
    • CPU (0)
    • Linux (0)
    • Java (0)
    • Springboot (5)
    • ChatGPT (1)
    • Cursor (0)
    • Tailwind CSS (2) N

Tag

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/11   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바