Tailwind CSS

Tailwind CSS란

HTML을 떠나지 않고 빠르게 빌드하는 모던 웹 사이트 즉, CSS 문서를 따로 작성하지 않고도 HTML 문서 내에서 웹 사이트를 구축할 수 있다는 것

Tailwind CSS의 탄생 배경

• CSS는 선택자를 통해 스타일링을 적용 하기 때문에 마크업 구조에 매우 의존한다.

• BEM(Block Element Modifier)은 마크업 구조의 의존성을 줄이기 위한 방법론으로, 선택자를 사용하지 않고 각 요소마다 클래스를 추가하여 스타일을 적용하는 방식이다.

• BEM 방식을 적용한 후 클래스 네이밍을 어떻게 지정하는지에 따라 컨텐츠(HTML)에 의존하는 CSS vs CSS에 의존하는 컨텐츠(HTML)로 구분된다.

  • 컨텐츠(HTML)에 의존하는 CSS → 컨텐츠에 따라 CSS 클래스 네이밍을 지정하면 HTML은 독립적이게 되지만 CSS는 컨텐츠에 따라 스타일을 지정하므로 스타일이 비슷하지만 컨텐츠가 다른 경우 재사용할 수 없다.

  • CSS에 의존하는 컨텐츠(HTML) → 컨텐츠에 구애받지 않고 UI 패턴에 따라 클래스 네이밍을 지정하면 CSS는 독립적이게 되어 재사용이 가능해지지만, HTML은 어떤 클래스가 존재하는지 알아야 하므로 CSS에 의존적이게 된다.

• Tailwind CSS는 컨텐츠에 구애받지 않는 재사용이 가능한 CSS. 즉, CSS에 의존적인 HTML 방식을 선택함

• 컴포넌트가 구체적이고 복잡해질수록 재사용 가능한 CSS를 작성하기 어려워진다. 이러한 문제를 해결하기 위해 스타일을 재사용이 가능한 작은 요소(유틸리티 클래스)로 구성하고 조합하여 스타일을 구축하는 방식으로 복잡성을 낮추고 일관성과 재사용성을 향상시킨다.

Tailwind CSS는 제한적이며 커스텀이 불가능하다는 오해

Tailwind CSS는 미리 정의된 클래스들을 사용하여 디자인을 구축하는 방식이기 때문에, 기존의 부트스트랩과 같은 UI 라이브러리들처럼 커스터마이징이 제한적이거나 어려울 것이라는 선입견을 가지고 있었다.

Tailwind는 디자인 시스템을 쉽게 생성할 수 있는 많은 옵션들과 커스텀 유틸리티 클래스로 다양한 스타일을 쉽게 추가할 수 있다.

Tailwind CSS는 Inline Style과 다르다.

• Inline style은 사용자가 어떤 스타일을 선택할지 제약이 없다.

• Tailwind CSS는 사용자에게 지정된 Utility Class만을 제공함으로써 선택을 강요한다. 또한 반응형 및 호버, 포커스 상태에 따른 스타일 지정 등 인라인 스타일에서 할 수 없는 모든 것들을 사용할 수 있다.

Tailwind 특징

미리 정의된 클래스들을 제공하여 쉽게 디자인을 구축할 수 있도록 도와준다.

장점

• HTML만 보고 어떤 스타일이 적용되었는지 쉽게 파악 가능

• 클래스 이름을 고민할 필요 없다.

• 미리 정의된 유틸리티 클래스를 사용하므로 CSS 코드를 작성하는데 들이는 노력이 줄어 개발 속도 향상됨

• 일관된 스타일을 사용하므로 유지보수하기 좋다.

• 제공되는 유틸리티 클래스들이 엄청나다.

단점

• 기본적으로 정의된 클래스를 외워야 한다.

• 스타일이 복잡해질 수록 사용하는 클래스들이 늘어나 HTML 코드가 복잡해지고 가독성이 떨어진다.

추천 VSCode Extension

• Tailwind CSS Intellisense

  • Tailwind 클래스 자동 완성 및 미리보기 기능을 제공

• Headwind

  • 클래스 네이밍을 스타일 카테고리 별로 정렬해준다.

  • 코드의 가독성을 높히고 중복된 클래스를 찾게 도와준다.

• inline fold

  • tailwind class 부분을 접어두는 기능

  • 호버 또는 포커싱 되면 펼쳐진다.

  • 

시작하기

Install

npm install -D tailwindcss postcss autoprefixer

• postcss → CSS 전척리기, 다양한 플러그인을 통해 CSS를 분석하고 변환하는데 사용된다.

• autoprefixer → 브라우저 호환성을 위한 vendor prefix를 자동으로 추가해주는 postcss 플러그인

vendor prefix란?

브라우저 제조사별로 고유한 접두사를 CSS 속성에 붙혀서 브라우저 호환성을 보장하는 것

• Chrom, Safari → -webkit-

• Firefox → -moz-

• IE10+ → -ms

기본 설정파일 생성

tailwind.config.js, postcss.config.js 설정파일 추가

-p 옵션을 사용하면 postcss.config.js 파일도 추가로 생성된다.

npx tailwind init -p 

tailwind.config.js

tailwindcss를 프로젝트에 맞게 구성할 수 있는 설정파일

• tailwind css에서 제공하는 다양한 유틸리티 클래스를 수정하거나 커스터마이징

• 폰트, 컬러 등의 디자인 시스템을 프로젝트에 맞게 구성

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.tsx", "./stories/**/*.tsx"], // 적용할 파일 경로
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

플러그인을 구성하고 플러그인들의 처리 순서를 설정한다.

• 플러그인 등록 순서대로 실행되기 때문에 순서에 유의하자.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Tailwind 지시문 추가

tailwind css를 사용하기 위해 css 파일에 @tailwind 지시문를 추가한다

• Tailwind는 base, components, utilities 총 3가지 레이어를 제공한다.

• 각 레이어는 해당 레이어에서 사용이 가능한 CSS가 포함되어 있다.

• css 파일로 컴파일될 때 각 레이어에 대한 CSS 코드로 변환된다.

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

지시문

• @tailwind base → HTML 요소의 기본적인 스타일을 정의

• @tailwind components → 컴포넌트별 스타일을 정의 (유틸리티 클래스 집합)

• @tailwind utilities → 단일 유틸리티 클래스를 정의