TIL | Tailwind CSS

Tailwind CSS

Overview

Tailwind CSS?

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

• Utility-first CSS framework, 즉 미리 정의된 CSS의 특성들을 class 를 통해 불러와 적용시키는 형태의 CSS 프레임워크이다.

• 일반적인 CSS와 Utility-first CSS 스타일을 비교하였을때, 비교적 적은 코드로 빠른 시간 안에 레이아웃을 구현할 수 있다.

비교적 낮은 러닝커브

Tailwind CSS을 사용하기 위해서는 패키지 설치 및 세팅 후, 원하는 html 요소에 class 을 부여해주면 바로 사용이 가능하다. 물론 원하는 스타일 위해 class 명 또한 알아야 하지만, CSS 의 기본 속성명을 알고 있다면 바로 사용하기에 훨씬 수월하다. (class 명이 직관적이며 공식문서에서 매우 친절하게 알려주기 때문이다.)

• 위처럼 공식문서에서 원하는 class별 CSS 속성들을 알기 쉽게 제공해주고 있다.

• 자동 완성을 도와주는 플러그인이 존재하여, 어렵지 않게 접근할 수 있다.

쉬운 커스텀

Tailwind CSS는 처음부터 확장 가능하고 커스터마이징할 수 있도록 설계되었다. 때문에 기존의 스타일의 값만 수정하거나, 확장하는 방식으로 커스텀이 가능하다. (class 별 확장하는 방식 또한 공식문서에서 예시 코드로 제공하고 있다.)

Custom style

• 커스텀은 tailwind.config.js 에서 가능하며, 직접 파일을 생성 및 커스텀을 하거나 npx tailwindcss init --full 커맨드를 통해 기존 스타일을 불러와 확인 후 수정하여 적용할 수 있다.

간단한 Responsive Design

반응형 디자인 또한 class 명으로 직접 지정해줄 수 있다. 특정한 뷰에서 특정한 클래스가 어떻게 보일지 직관적으로 확인이 가능하다.

)

• break 포인트에 해당하는 prefix 를 해당 class 명 앞에 붙여줌으로써, 반응형을 간편하게 구현할 수 있다.

스타일 재사용

• @apply 키워드를 통해, 원하는 class 명들을 묶어서 재사용할 수 있다.

---

Setting

사용하는 프레임워크별 설치 방법이 약간씩 차이가 있다. 공식 문서에 환경별 설치법이 있으니, 참고하여 설치하면 된다. (이번 CRA 환경 기준으로 세팅을 진행하였다.)

패키지 설치

npm install -D tailwindcss postcss autoprefixer

• tailwindcss: tailwindcss 패키지
• postcss: JS 플러그인을 통해 CSS를 변환시키는 툴
• autoprefixer: postcss 플러그인의 종류로, vender-prefix를 자동으로 붙여주는 플러그인

*vender-prefix : Google, IE 등 브라우저 공급 업체에서, 시험적인 기능을 추가할때 본인들의 브라우저 내에서 동작할 수 있도록 적용하는 방법이다. 아직 웹 표준 및 권고에 맞지 않거나, 완벽하게 제정된 상태가 아닌 CSS 기능을 사용하고자 할 경우 사용한다.*

tailwindcss.config.js, postcss.config.js 파일 생성

npx tailwindcss init -p 

 

tailwindcss.config.js , postcsss.config.js 파일 내용 추가

// tailwindcss.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // tailwindcss를 사용하고자 하는 경로, 파일
  ],
  theme: {},
  plugins: [],
};

// postcss.config.js (npx 커맨드를 통해 파일을 생성하면 아래 모듈이 자동 추가됨)
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

./src/index.css 에 tailwind 명령문 추가

@tailwind base; /* tailwind 기본 스타일 및 확장된 스타일 주입 */
@tailwind components; /* tailwind 기본 컴포넌트 클래스 및 확장된 컴포넌트 클래스 주입 */
@tailwind utilities; /* tailwind 기본 유틸리티 클래스 및 확장된 유틸리티 클래스 주입 */

---

참고

• Tailwind 공식문서
• Tailwind CSS Tutorial(The Net Ninja from youtube)