Tailwind CSS

Tailwind CSS

Utility-First를 지향하는 CSS 프레임워크

Utility-First란?
: 미리 정의된 유틸리티 클래스를 활용하여 스타일링 하는 것
→ CSS의 각 속성들을 직관적인 className으로 표현하여 효율적으로 사용 가능

뭐가 좋을까?
- className 작성에 대한 고민x
- Style Sheet를 오가는 컨텍스트 스위칭x
- CSS가 어떻게 적용되었는지 파악 가능해 스타일 수정에 드는 시간 단축
- 스타일을 적용할 때마다 새로운 CSS 파일 작성x

---

설치 및 세팅

1. tailwind CSS 설치하기

npm install -D tailwindcss
npx tailwindcss init

→ tailwind.config.js 자동 생성

2. Tailwind CSS 적용할 모든 템플릿 파일 경로 추가

// tailwind.config.js

/** @type {import('tailwindcss').Config} */

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

→ tailwind.config.js에 경로와 확장자 작성

3. globals.css에 Tailwind 지시문 추가

/* src/styles/globals.css */

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

→ Tailwind의 스타일들이 프로젝트에 적용됨

4. Tailwind 적용하기

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

→ Tailwind 빌드

---

+ Tailwind 설정 확장

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1DA1F2',
      },
      spacing: {
        128: '32rem',
      },
    },
  },
}

→ 커스터마이징: tailwind.config.js 파일을 활용해 테마를 확장하거나, 새로운 색상, 폰트, 간격, 그리드 시스템 등 추가 가능