[CSS] Tailwind CSS란?

1.TailWind CSS란?

TailWind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 빠르고 효율적인 반응형 웹 디자인을 구현할 수 있습니다. 반응형 디자인을 쉽게 만들기 위해서 Tailwind CSS는 다양한 브레이크 포인트를 제공합니다. TailWind CSS로 구현한 HTML 구조는 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query Sample TailwindCSS</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
     <div class="container mx-auto p-4">
        <header class="text-center mb-6">
            <h1 class="text-3xl font-bold">Media Query Example</h1>
        </header>
        <main>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-semibold">Column</h2>
                    <p>description</p>
                </div>
                <div class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-semibold">Column</h2>
                    <p>description</p>
                </div>
                <div class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-semibold">Column</h2>
                    <p>description</p>
                </div>
            </div>
        </main>
     </div>
</body>
</html>

위 예제에서 grid-col-1, md:grid-cols-2, lg:grid-cols-3 클래스를 사용해 화면 크기에 따라 열의 개수를 조정합니다.

기본: 작은 화면에서는 1열로 표시
중간(md): 화면크기가 중간 이상일때는 2열로 표시
큰화면(lg): 화면 크기가 클때 3열로 표시됨

2.Tailwind CSS 유용한 클래스

자주 사용되는 Tailwind CSS에 유용한 클래스들은 아래와 같습니다.

1.레이아웃 관련 클래스
- Flexbox:
  - flex: 플렉스 컨테이너로 설정
  - flex-row: 수평 방향으로 배치
  - flex-col: 수직 방향으로 배치
  - justify-center: 수평 중앙 정렬
  - items-center: 수평 중앙 정렬
- Grid:
  - grid: 그리드 컨테이너로 설정
- grid-cols-3: 3개의 열을 생성.
- gap-4: 그리드 아이템 간의 간격
2.타이포그래피
- text-xl: 큰 텍스트
- font-bold: 굵은 글씨
- text-center: 텍스트 중앙 정렬
- text-gray-500: 회색 텍스트 색상
3. 배경 및 테두리
- bg-blue-500: 파란색 배경
- bg-white: 흰색 배경
- border: 기본 테두리 추가
- border-gray-300: 회색 테두리
4. 여백 및 패딩
- 4-1.여백
  - m-4: 모든 방향의 1rem(16px) 여백 추가
  - mt-2: 위쪽에만 0.5rem(8px) 여백 추가
- 4-2.패딩
  - p-4: 모든 방향의 1rem(16px) 패딩 추가
  - px-2: 좌우에만 0.5rem(8px) 패딩 추가
5. 반응형 클래스
- md:bg-red-500: 중간 화면 이상의 배경색을 빨간색으로 변경
- lg:text-lg: 큰 화면에서 텍스트 크기를 증가

3.npm을 사용한 세팅법

npm을 통해 Tailwind CSS를 설치하고 설정하는 방법입니다. Tailwind의 설정을 커스터마이징 할 수 있어 더 유용합니다. 프로젝트 폴더에 들어가 다음 터미널 명령어에 npm 프로젝트를 초기화하는 코드를 입력해줍니다.

npm init -y

그 다음 아래 명령어로 TailWindCSS 설치와 설정 파일을 생성해줍니다.

npm install tailwindcss && yarn add tailwindcss

다음은 npx를 사용해 TailwindCSS의 기본 설정 파일을 생성해줍니다. 명령어 실행시 tailwind.config.js 파일이 생성됩니다.

npx tailwindcss init // 에러 발생시 아래 코드로 설치
npx tailwindcss-cli@latest init

다음 src 폴더를 만들어 그 안에 style.css 파일을 생성해주고 Tailwind의 지시어를 추가해줍니다.

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

다음 Tailwind CSS를 빌드해 CSS 파일을 생성해줍니다. 아래 명령어를 사용해 dist 폴더에 output.css를 생성해줄겁니다.

npx tailwindcss-cli@latest -i ./src/style.css -o ./dist/output.css --watch

마지막으로, HTML 파일에 output.css 파일을 포함시켜줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query Sample TailwindCSS</title>
    <!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> -->
     <link rel="stylesheet" href="dist/output.css">
</head>
<body class="bg-gray-100">
     <div class="container mx-auto p-4">
        <header class="text-center mb-6">
            <h1 class="text-3xl font-bold">Media Query Example</h1>
        </header>
        <main>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                <div class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-semibold">Column</h2>
                    <p>description</p>
                </div>
                <div class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-semibold">Column</h2>
                    <p>description</p>
                </div>
                <div class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-semibold">Column</h2>
                    <p>description</p>
                </div>
            </div>
        </main>
     </div>
</body>
</html>

4. Tailwind CSS의 장점

유틸리티 퍼스트 접근: 작은 클래스들로 구성되 있어, 필요할 때마다 클래스를 조합해 스타일 적용 가능, 코드 재사용성이 높아지며, 빠르게 UI 구성 가능
반응형 디자인 용이: 다양한 브레이크포인트를 제공하며, 반응형 디자인을 쉽게 구현할 수 있음, 클래스 이름에 접두사를 추가해 화면 크기에 따라 스타일을 쉽게 조정 가능
커스터마이징 가능: Tailwind는 설정 파일(tailWind.config.js)로 통해 색상, 간격, 폰트 등 쉽게 커스터마이징 가능
빠른 프로토 타이핑: 유틸리티 클래스 덕분에 빠르게 프로토타입할 수 있도록 해줌, UI 변경 사항을 쉽게 적용할 수 있어 디자인을 빠르게 반복할 수 있음
일관성 유지: 클래스 이름이 명확하고 직관적, 팀원들과 협업시 일관된 스타일 유지, 모든 요소에 대한 동일한 디자인 원칙을 적용할 수 있음
최적화된 빌드: PurgeCSS와 함께 사용 시, 실제 사용된 클래스만 포함한 CSS 파일을 생성해 최종 빌드 크기를 최소화할 수 있음, 성능향상에 기여

5. TailWind CSS를 사용할 때

신규 프로젝트: 새로운 웹 애플리케이션 또는 웹 사이트를 구축할 때, TailWind CSS를 사용해 빠르게 스타일을 적용하고 반응형 디자인을 구현
프로토타입 제작: UI/UX 디자이너와 협업하여 빠르게 프로토타입을 만들고 ,디자인 변경 사항을 즉시 적용할 수 있음
일관된 디자인 시스템 필요: 특정 디자인 시스템을 따르거나 일관적인 스타일을 유지해야 할때, TailWindCSS로 쉽게 관리
복잡한 UI 구성: 다양한 UI 요소와 레이아웃이 필요한 복잡한 애플리케이션에서 TailWindCSS에 유틸리티 클래스가 유용
개발 속도 향상: 빠른 개발과 유지보수가 필요할때, TailWindCSS는 코드의 가독성을 높이며, 필요한 스타일을 즉시 적용할 수 있어 효율적인 웹 개발 가능

LIST

'Front-End > CSS' 카테고리의 다른 글

[CSS] CSS 반응형 이해하기 (0)	2025.02.16
[CSS] CSS 4장. css 레이아웃 위치잡기, Floats, flexbox ,grid, 반응형 디자인, 미디어 쿼리 (0)	2025.02.05
[CSS] CSS 3장. css 텍스트 스타일링, 목록 스타일링, 스타일링 링크, 폰트 (0)	2025.02.04
[CSS] CSS 2장. css 값과 단위, overflow, 이미지, 미디어 양식 요소, 표 스타일링, (0)	2025.02.02
[CSS] CSS 1장. css Box Model 계단식 및 상속 (0)	2025.02.02