Tailwind CSS를 사용해보자

date

Jul 28, 2023

thumbnail

gsc

Done

public

slug

tailwind-jit-mode

author

Tailwind & JIT 모드

Tailwind CSS는 많은 개발자들이 선호하는 CSS 프레임워크 중 하나이다. JIT(Just-In-Time) 실시간 모드는 Tailwind CSS v2.1에서 추가된 기능이다. JIT 모드를 사용하면, Tailwind CSS는 컴파일 타임이 아닌 런타임에 CSS를 생성한다. 이는 빠른 개발 속도와 효율적인 CSS 생성을 가능하게 한다.

Tailwind 적용 예시


<div class="bg-blue-500 text-white p-4 rounded-lg">
	 결과
</div>

위 스타일을 비교하면 다음과 같다.

Tailwind CSS	CSS	설명
`bg-blue-500`	`background:#3b82f6`	bg는 background blue는 색상 500은 tailwind에서 지정한 색상 값
`text-white`	`color:white`	text는 주로 문자를 위한 명칭 white는 색상
`p-4`	`padding:1rem`	p는 padding을 의미하며, padding-left는 pl 과 같이 사용
`rounded-lg`	`border-radius: .5rem`	rounded는 border-radius를 위한 명칭 lg는 Large를 뜻하며 sm, md, xl, 3xl 등 다양하다.

이와 같이 스타일 작업이 매우 단순하며, 규칙을 가지고 사용하기에 CSS가 어색한 본인은 매우 쉽게 사용할 수 있었다.

JIT (Just-In-Time)

JIT는 초기 빌드 시간에 모든 것을 생성하는 대신 템플릿 작성 중에 필요할 때마다 스타일을 생성한다.

빠른 빌드 속도 Tailwind는 CLI를 사용하여 초기 컴파일에 3-8초, 웹팩 프로젝트에서는 큰 CSS 파일로 인해 30-45초가 소요된다. 이 라이브러리는 빌드 도구에 상관없이 가장 큰 프로젝트를 약 800ms만에 컴파일 할 수 있다. (재빌드는 3ms로 최적화됨)

모든 CSS 변형 상태에 대해 활성화 focus-visible, active, disabled와 같은 변형은 파일 크기를 고려하여 기본적으로 활성화되지 않는다. 이 라이브러리는 필요한 스타일을 생성하므로 필요할 때마다 언제든지 사용할 수 있다. sm:hover:active:disabled:opacity-75와 같이 스택 형태로도 쌓을 수도 있어 다시 한 번 변형을 구성할 필요가 없다.

사용자 지정 CSS를 작성하지 않고 임의의 스타일을 생성 색다른 배경 이미지를 위해 top: -113px와 같이 매우 구체적인 값이 필요한 경우 top-[-113px]와 같은 대괄호 표기법을 사용하여 필요한 유틸리티를 생성할 수 있다.

개발과 운영환경의 동일한 CSS 필요한 스타일이 생성되므로 운영에서 사용하지 않는 스타일을 제거할 필요가 없다.

개발 환경의 성능 향상 개발환경에서의 빌드가 운영환경의 빌드만큼 작기 때문에 빠른 성능으로 사용 가능하다.

JIT 모드 설정하는 방법

JIT 모드를 활성화하려면 다음과 같이 하면 된다.

tailwind.config.js 파일을 열어서 mode 속성을 jit으로 변경한다.


// tailwind.config.js
module.exports = {
  mode: 'jit', // JIT 모드 활성화
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // ...
  },
  plugins: [
    // ...
  ],
}

package.json 파일의 build 스크립트에서 -watch 옵션을 제거한다.


// package.json
{
  "scripts": {
    "build": "tailwindcss build ./src/styles.css -o ./dist/styles.css" // --watch 옵션 제거
  },
  // ...
}

./src/styles.css -o는 Tailwind CSS를 빌드하여 ./src/styles.css 파일을 ./dist/styles.css 파일로 출력하는 옵션이다.

개발환경 별 적용 요약

Tailwind CSS의 JIT 모드를 사용하는 방법에 대해 설명하였다. 이를 Spring, Vue, React, ElectronJS와 같은 다양한 프로젝트에 적용하는 방법은 각 프로젝트의 설정 방법에 따라 다를 수 있다. 보통은 각 프로젝트의 설정 파일에서 Tailwind CSS의 tailwind.config.js 파일을 참조하도록 설정하는 것이 필요하다.

Spring

Spring과 같은 Java 기반 백엔드 프로젝트에서는 gradle 또는 maven과 같은 의존성 관리 도구를 이용하여 Tailwind CSS를 설치하고, 설정 파일을 참조하도록 설정하면 된다.

Vue & React

Vue, React와 같은 프론트엔드 프레임워크에서는 일반적으로 npm 또는 yarn과 같은 패키지 매니저를 이용하여 Tailwind CSS를 설치한다. 이후에는 해당 프로젝트의 설정 파일에서 tailwind.config.js 파일을 참조하도록 설정하면 된다.

설정 파일에서 tailwind.config.js 파일을 참조하도록 설정하는 방법

main.js 파일에서 Tailwind CSS와 CSS 파일을 import 한다.


// main.js
import './index.css'

index.css 파일에서 Tailwind CSS를 import 한다.


/* index.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* ... */

ElectronJS

ElectronJS와 같은 데스크톱 애플리케이션에서는 일반적으로 npm 또는 yarn과 같은 패키지 매니저를 이용하여 Tailwind CSS를 설치하고, electron-builder와 같은 빌드 도구를 이용하여 애플리케이션을 패키징한다. 이때, Tailwind CSS의 설정 파일이 포함되도록 설정해야 한다.

그 외 설정 옵션

Purge: 사용하지 않는 스타일 제거

Theme: 색상, 글꼴 크기, 간격 등 사용자 정의

Variants: 클래스 중 원하는 것만 선택

Plugins: 사용자 지정 플러그인 추가

Purge

purge 옵션을 사용하면 사용하지 않는 스타일을 제거하여 더 작은 CSS 파일을 생성할 수 있다. purge 옵션은 배열로 정의되며, Tailwind CSS가 검사하고 제거해야 하는 파일 또는 디렉토리를 지정한다. 기본적으로 Tailwind CSS는 HTML, Vue, React, Angular 등의 파일을 검사하지만, 사용자가 지정한 파일을 추가로 검사할 수도 있다.

Theme

theme 옵션을 사용하면 Tailwind CSS의 기본 색상, 글꼴 크기, 간격 등을 사용자 정의할 수 있다. theme 옵션은 객체로 정의되며, colors, fontSize, spacing 등의 속성을 포함한다.

Variants

variants 옵션을 사용하면 Tailwind CSS의 클래스 중 어떤 것을 생성할지를 선택할 수 있다. 기본적으로 Tailwind CSS는 responsive, hover, focus, active, group-hover, focus-within, first, last, odd, even, disabled와 같은 다양한 변형 클래스를 제공한다. variants 옵션을 사용하면 이 중 원하는 것만 선택하여 사용할 수 있다.

Plugins

plugins 옵션을 사용하면 Tailwind CSS에 사용자 지정 플러그인을 추가할 수 있다. 플러그인은 함수로 정의되며, addUtilities, addComponents, addBase, addVariant와 같은 Tailwind CSS API를 사용하여 플러그인을 정의할 수 있다.

마무리

Tailwind CSS를 직접 사용해보니, 매우 단순하고 빌드를 통해 사용하는 CSS만 적용할 수 있어 라이트하게 사용할 수 있었다. 다만, Tailwind CSS만의 스타일 양식과 class속성에 작성하다 보니 마크업 쪽 코드가 지저분해보였다. 공통적인 부분은 .css 파일 내에서 @apply를 사용하여 묶어 사용하는게 깔끔할 것 같다. 위 설명은 간단하게 핵심만 설명하였으니, 자세한 설정 방법은 공식페이지 문서를 통해 살펴보길 바란다.

현재 본 블로그도 Tailwind CSS를 사용하였다. 서툰 사용으로 정말 지저분한 마크업을 볼 수 있다.. 나중에 깔끔하게 바꿔봐야겠다.

참조

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Just-in-Time Mode - Tailwind CSS

Installation - Tailwind CSS

아래로 당겨서 새로고침