240628 TIL

TIL: Tailwind CSS

1. 유틸리티 클래스: Tailwind CSS는 미리 정의된 클래스들을 제공하여, 직접 CSS를 작성하지 않아도 된다. 예를 들어, bg-blue-500 클래스를 사용하면 배경색을 파란색으로 설정할 수 있다.
2. 모바일 우선 접근 방식: Tailwind는 모바일 우선 설계가 가능하다. 이를 통해 반응형 디자인을 쉽게 구현할 수 있다. 예를 들어, md:bg-red-500와 같이 작성하면 중간 크기 이상의 화면에서만 배경색이 빨간색으로 변경된다.
3. 커스터마이징: Tailwind는 설정 파일을 통해 커스터마이징할 수 있다. 이를 통해 프로젝트에 맞는 색상, 간격, 폰트 등을 설정할 수 있다.
4. JIT 모드: Just-In-Time(JIT) 모드는 사용자가 실제로 사용하는 클래스만 빌드하여 성능을 최적화한다. 이를 통해 불필요한 CSS가 포함되지 않으며, 빌드 속도도 빨라진다.

코드 예제:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Tailwind CSS를 사용한 예제 박스
</div>

위 코드는 배경색이 파란색이고, 텍스트 색상이 흰색인 박스를 생성한다. 또한, p-4 클래스로 내부 패딩을 설정하고, rounded-lg 클래스로 모서리를 둥글게 만든다.