Tailwind CSS와 함께 날개 돋친 CSS 스타일링

Published: at 오후 03:16

Tailwind CSS와 함께 날개 돋친 CSS 스타일링

프론트엔드 개발자라면 누구나 CSS 스타일링에 대한 고민이 있을 것입니다. 일관성 있고 유지보수하기 쉬운 CSS 코드를 작성하는 것은 쉽지 않은 일이죠. 이런 고민을 해결해줄 수 있는 CSS 프레임워크, Tailwind CSS에 대해 알아보겠습니다.

Tailwind CSS란?

Tailwind CSS는 utility-first CSS 프레임워크입니다. 미리 정의된 클래스들을 조합하여 스타일을 적용하는 방식으로, 복잡한 CSS 코드 작성 없이도 빠르고 일관성 있는 스타일링이 가능합니다.

Tailwind CSS의 주요 특징은 다음과 같습니다.

Tailwind CSS 시작하기

Tailwind CSS를 프로젝트에 적용하는 방법은 매우 간단합니다. 우선 Tailwind CSS를 설치해 줍니다.

npm install -D tailwindcss
npx tailwindcss init

그리고 Tailwind 설정 파일인 tailwind.config.js에서 purge 옵션을 설정해 사용할 템플릿 경로를 지정합니다.

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  // ...
}

이제 Tailwind CSS 유틸리티 클래스를 사용할 준비가 되었습니다!

Tailwind CSS 활용 팁

Tailwind CSS를 더욱 효과적으로 사용할 수 있는 몇 가지 팁을 공유합니다.

1. 커스텀 클래스 정의하기

자주 사용되는 스타일은 커스텀 클래스로 정의하여 재사용할 수 있습니다. @apply 지시자를 사용하면 기존 유틸리티 클래스를 조합하여 커스텀 클래스를 만들 수 있습니다.

.btn {
  @apply px-4 py-2 rounded font-bold hover:bg-blue-600;
}

2. 반응형 디자인 적용하기

Tailwind CSS에서는 breakpoint prefix를 사용하여 반응형 디자인을 손쉽게 적용할 수 있습니다.

<div class="sm:text-center md:text-left lg:text-justify">
  <!-- ... -->
</div>

3. 다크 모드 적용하기

Tailwind CSS 2.0부터는 다크 모드를 지원합니다. dark: prefix를 사용하면 다크 모드에서의 스타일을 별도로 지정할 수 있습니다.

<div class="bg-white dark:bg-gray-800">
  <!-- ... -->  
</div>

마치며

Tailwind CSS는 생산성과 유지보수성이 높은 CSS 스타일링을 가능하게 해주는 강력한 도구입니다. 초기 세팅이 간단하고 유틸리티 클래스 조합만으로도 일관성 있는 스타일링이 가능하죠.

Tailwind CSS와 함께라면 CSS 스타일링이 날개 돋친 듯 쉬워질 거예요. 프로젝트에 Tailwind CSS를 적용해 보시는 걸 추천드립니다!