[CSS] TailWind CSS

TailWindCSS

테일윈드는 가장 대표적인 유틸리티-퍼스트(Utility-First) 프레임워크이다. 이미 작성된 CSS코드를 가지고 있으며 바로 코드에 클래스명으로 빠르게 적용할 수 있다.

여기에서 유틸리티-퍼스트란 뭘까? CSS를 직접 작성해야하는 SCSS나 스타일드 컴포넌트와는 달리 CSS를 작은 단위의 유틸리티 클래스(예: text-center, mt-4, bg-blue-500 등)로 구성하는 스타일링 접근 방식이다.바로 엘리먼트에 입력함으로써 개발 속도를 높이고 직관적인 스타일링 가능하게 한다.

TailWindCSS 사용법

먼저 vite로 프로젝트를 만들고 초기화한다.
테일윈드와 종속성을 설치한다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• tailwindcss: Tailwind CSS 프레임워크. 핵심 기능
• postcss: Tailwind CSS와 같은 CSS 툴들을 위한 플러그인 런타임. CSS를 변환해주는 도구이며 플러그인을 사용하여 CSS를 처리하고, 다양한 기능을 추가할 수 있다.
• autoprefixer: CSS에 필요한 브라우저 접두사를 자동으로 추가. PostCSS 플러그인 중 하나
• tailwindcss init: tailwind.config.js 생성. Tailwind CSS를 커스터마이징할 때 사용
• -p: postcss.config.js 파일 생성. PostCSS 플러그인 설정을 관리하는 데 사용되며, tailwindcss와 autoprefixer 플러그인을 적용할 수 있게 한다.

tailwind.config파일을 열어 Tailwind CSS가 어떤 파일에 적용 될 지 명시한다.

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

• src안에 js, ts, jsx, tsx 파일에 Tailwind CSS가 적용될 것이라는 의미이다.

사용할 CSS 파일 안에 Tailwind CSS 지시문을 입력한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

이제 Tailwind CSS를 사용할 준비가 완료되었다.

본격적으로 실습해보기 전에 Tailwind CSS의 장단점과 추천 익스텐션에 대해 설명하겠다.

Tailwind CSS 장단점

장점

• 빠른 개발 속도: 유틸리티 클래스들로 구성되어 있어 CSS를 작성하지 않고도 빠르게 스타일을 적용할 수 있다.
• 일관성 있는 디자인: 미리 정의된 클래스들을 사용하여, 프로젝트 전반에 걸쳐 일관성 있는 스타일을 유지할 수 있다.
• 작은 파일 크기: 사용하지 않는 CSS는 자동으로 제거(Purge)되어, 최종 CSS 파일의 크기를 최소화한다.
• 유연한 커스터마이징: Tailwind의 설정 파일을 통해 쉽게 테마나 스타일을 커스터마이징할 수 있다.
• 반응형 디자인 지원: 반응형 유틸리티 클래스가 기본으로 제공되어 모바일부터 데스크탑까지 쉽게 대응할 수 있다.

단점

• 초기 학습 곡선: Tailwind의 유틸리티 클래스가 많아 익숙해지기까지 시간이 걸릴 수 있다.
• 클래스 중복: HTML 코드에 많은 클래스가 중첩될 수 있어 가독성이 떨어질 수 있다.
• 의존성 문제: 프로젝트의 스타일링이 Tailwind에 종속되므로, 다른 CSS 프레임워크로 전환하기 어려울 수 있다.
• JSX의 가독성 저하: React 같은 프레임워크에서 JSX 코드가 복잡해질 수 있다.
• 커스터마이징 제약: 매우 구체적인 디자인 커스터마이징이 필요한 경우 Tailwind의 기본 제공 클래스만으로는 한계가 있을 수 있다.

요약하면 다양한 기능을 제공하며 빠르고 편리한 방식으로 사용 가능하지만 처음 접근할 땐 어려울 수 있으며 코드의 가독성이 떨어지고 구체적인 커스터마이징은 힘들다는 것이다.

개인적인 생각이지만 디자인이 중점이 아닌 실용적인 사이트를 만들 때 편리할 것 같다.

Tailwind CSS 추천 익스텐션

• Tailwind CSS IntelliSense: 자동 완성 및 오류 검사해준다.

ext install bradlc.vscode-tailwindcss

• PostCSS Language Support: Tailwind CSS와 함께 사용하는 PostCSS에 대한 지원을 제공한다. 자동완성, 오류방지, 문법강조, 플러그인 지원 등의 기능이 있다.

ext install csstools.postcss

• Headwind: 클래스들을 자동으로 정렬해준다.

ext install heybourn.headwind

회고: 테일윈드 전에 써봤었는데 오랜만에서 써서 좀 재밌었다. 근데 많이 잊어버려서 약간 헤맸다. 앞으로 자주 써야겠당