[Tailwind CSS] Tailwind CSS란?

개요

직접 만드는 프로젝트로 Tailwind CSS를 적용해서 반응형 디자인을 해보려고 한다. 지금부터 차근차근 하나씩 정리해보고, 실제 프로젝트에 사용해볼거다!

 

1. Tailwind CSS란?

 

Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 미리 정의된 클래스를 조합해 빠르게 UI를 구성하도록 할 수 있다.

 

*유틸리티 퍼스트(Utility-First)

-> 기능별로 쪼개진 작은 클래스들(유틸리티 클래스)을 조합해 UI를 구성하는 방식이다.

 

예를 들어서, 버튼에 패딩과 배경색을 주고 싶으면 다음과 같이 작성된다

<button class="px-4 py-2 bg-blue-500 text-white rounded">
  버튼
</button>

 

위의 코드와 같이 사전에 정의된 클래스를 조합해 스타일을 구성하기 때문에 별도의 CSS 작성 없이 빠르게 UI를 구성할 수 있다.

 

1-1. 특징

1) 유틸리티 클래스 기반**

-> mt-4, text-center, bg-red-500과 같이 기능 중심의 클래스를 제공해 이를 조합해서 다양한 디자인을 구현할 수 있다.

 

2) 미리 정의된 디자인 시스템

-> 기본적으로 디자인 시스템(색상, 여백, 타이포그래피 등)을 제공한다.

 

3) 반응형 디자인 지원

-> 모바일부터 데스크탑까지 반응형 레이아웃을 손쉽게 만들 수 있도록 sm:, md:, lg: 같은 접두어를 지원한다.

<div class="text-sm md:text-lg">텍스트</div>

 

4) 커스터마이징 기능

-> tailwind.config.js 파일을 통해 색상, 폰트 등을 프로젝트에 맞게 커스터마이징 할 수 있다.

 

5) JIT 모드 지원

-> Just-In-Time 컴파일 기능을 통해 사용하는 클래스만 CSS로 빌드되서 번들 크기가 작고 빌드 속도도 빠르다.

 

1-2. Vite 기반 React 프로젝트에 Tailwind CSS 설치하기

Tailwind CSS 설치

npm install -D tailwindcss@3.4.17 postcss autoprefixer

 

npm install -D tailwindcss postcss autoprefixer로 설치하려고 하니까 계속해서 오류가 발생해서, 다른 블로그 찾아보니까 버전 문제인 것 같아서 수정했다.

 

npx tailwindcss init -p

 

: postcss

-> CSS 후처리 도구로, Tailwind의 유틸리티 클래스를 변환할 때 사용한다.

 

: autoprefixer

-> 다양한 브라우저에 맞게 자동으로 CSS 접두어(-webkit, -moz 등)를 추가해주는 도구이다.

 

: npx tailwindcss init -p

-> tailwind.config.js(Tailwind 설정 파일)과 postcss.config.js(PostCSS 설정 파일)를 동시에 생성한다.

 

Tailwind 설정 파일 수정

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

: content

-> Tailwind가 어떤 파일을 읽고 사용 중인 클래스를 추출할지 경로를 지정한다.

-> 여기서는 index.html과 src/폴더 내의 js/ts/jsx/tsx 파일로 정의했다.

 

: theme

-> Tailwind의 기본 테마를 설정한 것이고, extend를 통해 색상, 폰트 등을 확장할 수 있다.

 

: plugins

-> Tailwind 플러그인을 추가하는 곳이다.

-> forms, typography, aspect-ratio 같은 것들

 

CSS에 Tailwind 지시어 추가

// src/index.css

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

 

: base

-> Tailwind의 초기화 스타일을 포함한다.

 

: components

-> 사용자 정의 컴포넌트 스타일이나 공통 스타일을 작성할 수 있는 공간이다.

 

: utilities

-> Tailwind의 유틸리티 클래스(bg-red-500, text-center 등)을 포함한다.

 

위의 세가지가 index.css에 반드시 선언되어 있어야 한다!

 

React 앱에 css 파일 연결

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css' // Tailwind가 적용된 CSS 파일

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 

이건 처음부터 되어 있긴 한데, Tailwind가 적용된 CSS 파일을 실제 프로젝트에 적용해야 한다.

 

이렇게 하면 적용 끝!