Tailwind CSS 프레임워크 사용하기

Tailwind CSS는 유틸리티 퍼스트 utility-first CSS 프레임워크로, 클래스 이름으로 스타일을 직접 HTML에 적용하는 방식이다. 

빠르고 효율적으로 디자인을 적용할 수 있다. 

 

1. Tailwind CSS 설치 

Tailwind CSS를 사용하려면 먼저 프로젝트에 설치해야 한다. 

Node.js 환경이 필요하니 설치되어 있어야 한다. 

 

1) CDN 방식으로 사용 (빠른 테스트용)

HTML 파일에 스크립트를 추가하면 설치 없이 바로 사용할 수 있다. 

<script src="https://cdn.tailwindcss.com"></script>

 

2) 프로젝트에 설치해서 사용 (권장)

프로젝트 초기화 및 Tailwind 설치

터미널에서 아래 명령어를 실행한다. 

npm init -y  # package.json 생성
npm install -D tailwindcss  # Tailwind CSS 설치
npx tailwindcss init  # 설정 파일 생성

 

설정 파일 tailwind.config.js 수정

tailwind.config.js 파일이 생성되면, 스타일을 적용할 파일 경로를 지정한다. 

module.exports = {
  content: ["./src/**/*.{html,js}"], // 스타일을 적용할 파일 경로
  theme: {
    extend: {},
  },
  plugins: [],
}

 

CSS 파일 생성

프로젝트 루트에 input.css 파일을 만들고 다음을 추가한다. 

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

 

 

빌드 실행

터미널에서 아래 명령어로 CSS를 컴파일한다.

output.css가 생성되며, 이 파일을 HTML에 연결한다. 

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

 

HTML에 적용

<link href="/output.css" rel="stylesheet">

 

2. 기본 사용법 

Tailwind CSS는 클래스를 통해 스타일을 적용한다. 

텍스트 크기, 색상, 여백 등을 클래스 이름으로 지정해서 사용한다.

<div class="bg-blue-500 text-white p-4 rounded-lg">
  안녕하세요, Tailwind CSS입니다!
</div>

 

유요 유틸리티 클래스는 다음과 같다. 

 

텍스트 배경 : bg-{색상}-{숫자} 

텍스트 크기 : text-{크기}

여백 : m-{크기} (margin), p-{크기} (padding)

정렬 : flex, justify-center, items-center 

너비/높이 : w-{크기}, h-{크기} 

 

3. 반응형 디자인 

Tailwind는 모바일 퍼스트 방식으로, 화면 크기에 따라 스타일을 조정한다. 

접두사 sm:, md:, lg:, xl: 을 사용한다.

<div class="text-center text-blue-500 md:text-left md:text-green-500">
  화면 크기에 따라 색상과 정렬이 바뀝니다!
</div>

 

위 코드의 뜻은 아래와 같고 브라우저 크기에 따라 적용된다. 

기본 텍스트 가운데 정렬, 파란색,  md (768px 이상): 텍스트 왼쪽 정렬, 초록색  

 

4. 커스터마이징 

tailwind.config.js 에서 테마를 확장하거나 사용자 정의 값을 추가할 수 있다. 

아래와 같이 정의 후, HTML에서 bg-custom-blue 로 사용할 수 있다. 

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1E40AF',
      },
    },
  },
};

 

5. 실제 예제

<button class="bg-purple-600 text-white py-2 px-4 rounded hover:bg-purple-800">
  클릭하세요
</button>

 

간단한 버튼 예제로,

보라색 배경, 흰색 글자, 세로 패딩 0.5rem, 가로 패딩 1rem, 보더 둥글게, 마우스 오버 시 더 어두운 보라색

 

6. 추가 팁 

VSCode 확장 프로그램: Tailwind CSS IntelliSense 설치하면 클래스 자동 완성이 가능하다. 

공식 문서: 더 많은 유틸리티와 사용법은 Tailwind CSS 공식 문서에서 확인한다. 

https://tailwindcss.com/docs

Installing with Vite - Installation