손 쉬운 CSS 작성이 가능한, Tailwind CSS 설치&사용하기

웹 개발자라면 누구나 CSS를 사용하지만, 복잡한 CSS 코드 작성으로 어려움을 겪은 적이 한 번쯤 있을 것입니다.

Tailwind CSS는 바로 이러한 문제를 해결하기 위해 등장한 CSS 프레임워크입니다. 기존 CSS와는 달리 유틸리티 클래스 기반으로 구성되어 있어, 마치 레고 블록처럼 직관적으로 CSS 코드를 작성할 수 있습니다.

 

Tailwind CSS 란,

Tailwind CSS는 Adam Wathan과 Adam Pisoni가 개발한 CSS 프레임워크로, 2017년 오픈 소스로 공개되었습니다. Tailwind CSS는 유틸리티 클래스 기반으로 구성되어 있으며, HTML 요소에 직접 클래스를 추가하여 원하는 스타일을 적용할 수 있습니다. 또한, 다양한 색상, 글꼴, 크기, 여백, 패딩 등을 위한 미리 정의된 클래스를 제공하여 개발자의 작업 효율성을 높여줍니다.

장점에는,

• 유틸리티 클래스를 사용하여 코드를 직접 작성하기 때문에 별도의 CSS 파일을 만들거나 관리할 필요가 없습니다.
• Tailwind CSS 코드는 간결하고 명확하며, 코드를 읽고 이해하기 쉽습니다. 이는 코드 유지 관리에도 용이합니다.
• Tailwind CSS는 HTML 요소에 직접 클래스를 추가하여 원하는 스타일을 적용하기 때문에 디자인 방식이 직관적입니다.
• Tailwind CSS는 개발자가 원하는 대로 사용자 정의 및 확장이 가능합니다. 기본 제공되는 클래스 외에도 자체 클래스를 만들거나, 기존 라이브러리를 활용하여 사용할 수 있습니다.

단점에는,

• 기존 CSS와는 다른 디자인 방식을 사용하기 때문에 처음에는 다소 학습 곡선이 존재할 수 있습니다.
• Tailwind CSS는 유틸리티 클래스 기반으로 구성되어 있기 때문에 복잡하고 자유로운 디자인을 구현하기에는 다소 제약적일 수 있습니다.

몇가지 단점에도 불구하고, 손 쉽게 CSS를 작성할 수 있다는 장점 때문에 최근에는 Tailwind CSS를 사용한 웹 개발이 인기 입니다. 아래 절차대로 설치하고, 직접 사용해보며 Tailwind CSS의 편리성을 직접 알아보겠습니다.

Tailwind CSS 설치하기

1. Tailwind CSS 설치

npm install -D tailwindcss
npx tailwindcss init

npm을 통해 Tailwind CSS를 설치하고 tailwind.config.js 파일을 만듭니다.

2. 템플릿 경로 구성

#tailwind.config.js 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], #사용할 폴더 경로와 확장자로 변경합니다.
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.config.js 파일의 모든 템플릿 파일에 대한 경로를 추가합니다.

3. CSS에 Tailwind 지시어 추가

#src/index.css

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

Tailwind의 각 레이어에 대한 @tailwind 지시어를 기본 CSS 파일(최상위 CSS 파일)에 추가합니다.

저의 경우에는 index.css 파일에 추가해주었습니다.

4. HTML에서 Tailwind 사용하기

<div className="text-3xl font-bold text-blue-600">
  HI!
</div>

 

HTML 태그의 className 속성에 Tailwind CSS의 유틸리티를 주어 원하는 스타일대로 적용합니다.

Tailwind CSS 사용하기

어떤 스타일들을 적용할 수 있는지는 아래 Tailwind CSS 공식 사이트를 통해 참조할 수 있습니다.

Tailwind CSS 공식 홈페이지

좌측 구역의 스크롤을 내리며 원하는 유틸리티를 찾거나, 검색하여 내용을 확인할 수 있습니다.

예시로, 제가 적용했던 유틸리티인 text-3xl 에 대해 내용을 확인해 보겠습니다.

위 이미지와 같이 Class 에는 HTML 태그의 className 속성에 작성하면 되는 값을 확인할 수 있고,

Properties 에는 해당 Class가 작성되면 적용될 CSS 들을 확인할 수 있습니다.

고로, ‘font-size: 0.75rem’ 과 ‘line-height: 1rem’ 스타일을 적용하기 위해 두줄을 작성해야 했던 코드를 ‘text-xs’ 유틸리티 하나만으로 적용할 수 있게 되는 것 입니다.

마치며,

Tailwind CSS는 숙달되기 전까지는 공식 홈페이지를 참조하며 작업을 해야하지만, 코드가 간결해지고 작성이 쉬워지는 장점이 큰 것을 느낄 수 있습니다.

VS Code 에서 사용하시는 분들께는 아래 확장 프로그램 설치를 추천드립니다.

 

Tailwind의 유틸리티의 작성을 도와주는 프로그램으로, 유틸리티를 자동 완성 해주는 기능이 있습니다.

 

 

출처