[TIL] Tailwind CSS 기초 - 1 (modifier, ring)

오늘 공부한것 & 기억하고 싶은 내용

Tailwind CSS IntelliSense

Tailwind를 사용하기에 앞서 vscode에 꼭 설치해야 하는 확장 프로그램이다.

• 자동완성 기능을 제공하고, 사용할 색상 값이나 기존 css 코드를 알려줘서 보기가 편하다.
• class 중복이 있거나 오타가 있을때도 알려주기에 굉장히 유용하다.
• tailwind.config.ts 파일을 탐색해서 프로젝트 안에 있는지를 확인한다. (theme 컨트롤할듯)

modifier

• 스타일을 조건부로 적용할 수 있게 해준다.
• 다크모드나 라이트모드에 반응할 수 있게 만들어준다.
• 큰 화면을 위한, 중간화면을 위한, 작은 화면을 위한 스타일을 적용할 수 있다.
  (클래스 쪽에 엔터만 쳐도 다음과 같이 확장프로그램이 알려줌)
  
• modifier는 항상 끝에 :(colon 콜론)을 가지고 있다. 콜론 다음 조건이 참일 때 적용

<span className="bg-green-400 text-white uppercase px-2 py-1.5 text-xs font-medium rounded-full transition hover:bg-green-500 hover:bg-green-500 hover:scale-125"></span>

//bg-green-400 에서 hover를 하면 bg-green-500됨
//계속 추가 가능

dark:모드

• 기본적으로 컴퓨터의 기본 설정을 참조하기 때문에 다크모드로 설정되어 있는 컴퓨터에선 먹힘!
• 2가지의 다크 모드 전략이 있다.

1. 사용자의 기본 설정을 따라는 것
2. class의 이름을 통해서 구현하는 방법

ring

• 기본적으로 내 객체에 고리를 제공해준다.
• outline과 비슷해보이지만 내가 원하는대로 사용자화(커스텀) 할 수 있다.
• ring은 두개의 변수를 생성하고 있다. (tw-ring-shadow/tw-ring-offset-shadow)
  
• tw-ring-offset-shadow를 생성할 때 여러 변수들을 사용한다.

Tailwind엔 변수를 지정하는 class 타입도 존재한다.

가상요소

• placeholder 의 스타일을 주려면 콜론추가! ->placeholder: drop-shadow

배운점 & 느낀점

부트스트랩과 비슷한 테일윈드!
직관적인 클래스명 덕분에 쓰기엔 무리 없어보이는데 Ring?이라는 신개념.... 이것도 익숙해지는 날이 오겠지..
확장 프로그램 덕분에 마우스를 갖다대거나 작성하다보면 친절하게 알려주는게 너무 좋다.
항상 클래스 이름 정하는 데 진이 빠지는데, Tailwind는 정해진 이름만 쓰면 끝이라 얼마나 편한지! 덕분에 개발 생산성이 쭉쭉 오르는 느낌이다.
앞으로 열심히 사용해봐야겠다!