Next.js에서 Tailwind CSS 시작하기

7~8월 해커톤 본선을 준비하면서 첫 CSS 프레임워크로 Tailwind CSS를 접해봤다. 팀원 분이 세팅해주신 걸 사용만 해봤기 때문에, 이번에 Next.js 프로젝트에 설치부터 직접 해보면서 기본적인 사용법까지 한번 정리해보려고 한다.

🌊 Tailwind CSS

Tailwind는 utility-first 특성을 가진 CSS 프레임워크다. 쉽게 말하면 자주 사용하는 CSS 속성들을 text-sm, flex, rounded 같은 이름의 유틸리티 클래스로 제공해주는 역할을 한다. 별도의 CSS 파일이나 styled component에 일일이 스타일을 작성하는 대신 html이나 JSX 태그의 클래스에서 바로 CSS 속성을 추가할 수 있는 것이다.

<div className="container">
  <p className="text">
    원래 이렇게 html 태그마다 일일이 클래스 지정해서 css 작성했었는데
  </p>
</div>
  
<style>
  .container {
  	width: 10rem;
  	height: 8rem;
  	background-color: #FFFFFF;
  }
  .text {
  	color: #5A6070;
    font-size: 1.25rem;
	line-height: 1.75rem;
  }
</style>

<div className="w-40 h-32 bg-white">
  <p className="text-[#5A6070] text-xl">
    tailwind로는 이렇게 짧고 간단하게 쓸 수 있다!
  </p>
</div>

사용 가능한 클래스들은 Tailwind CSS 공식문서에서 확인할 수 있다.

처음 사용할 때는 클래스명을 공식문서에서 찾아가며 스타일을 입히느라 시간이 꽤 걸렸는데, 점점 클래스명들도 익숙해지고 자주 쓰는 것들을 외우고 나니까 UI 구현 속도가 훨씬 향상된 걸 느낄 수 있었다.

Arbitrary values

Tailwind에는 기본적으로 정말 많은 유틸리티 클래스가 있지만 사용하다보면 클래스로 지원되지 않는 값이 필요할 때가 있다. 이럴 때 쓸 수 있는 첫 번째 방법은 대괄호 안에 내가 사용하려는 값을 입력하는 것이다. (두 번째 방법은 아래에서 소개한다.)

예를 들어, 나는 글자 크기를 15px로 지정하고 싶은데 기본으로 제공되는 건 text-sm (14px)과 text-base (16px)뿐이라고 하자. 이럴 땐 text-[15px]라고 작성하면 된다. 크기 단위뿐만 아니라 색상 등 다른 속성에도 bg-[#000000]와 같이 대괄호를 사용해 임의의 값을 입력할 수 있다.

✨ Installation

그럼 Next.js 프로젝트에 Tailwind CSS를 설치하는 법을 알아보자.

우선 다음과 같이 tailwindcss와 peer dependencies를 설치한 다음, init 명령어로 tailwind.config.js와 postcss.config.js 파일을 생성한다.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

tailwind.config.js 파일에 들어가서 tainwindcss를 적용할 경로들을 content의 빈 배열에 입력한다. 해당 프로젝트에서 src 디렉토리를 사용한다면 아래처럼 src로 시작하는 경로 1개만 입력하면 된다.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // `src` directory를 사용한다면
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

app 디렉토리에 있는 globals.css 파일의 맨 위에 아래와 같은 코드를 추가하여 CSS에 Tailwind 디렉티브를 추가한다.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

이제 프로젝트에서 Tailwind의 유틸리티 클래스를 사용할 수 있다!

VSCode extension

VSCode에서는 Tailwind CSS IntelliSense 익스텐션이 제공되는데, 자동완성, 오류 표시(Linting), CSS 프리뷰 등 편리한 기능들이 많다.

나는 이런 게 있는 줄도 모르고 몇 주 동안 매번 공식문서를 뒤져가며 스타일을 입혔는데... 좀 더 일찍 알았다면 훨씬 빨리 적응할 수 있었을 것 같다😥

Prettier

Tailwind를 위한 Prettier 플러그인도 있다. Tailwind로 스타일을 입히다 보면 비슷한 스타일이라도 클래스 순서가 뒤죽박죽이라 알아보기 어려울 때가 많은데, 이를 공식문서에 나와있는 순서대로 자동 정렬해주는 착한 친구다.

터미널에서 prettier-plugin-tailwindcss 플러그인을 설치한 다음 prettier.config.js 파일의 plugins에 이 플러그인을 추가하면 된다. (단, Prettier가 이미 설치되어 있어야 한다.)

npm install -D prettier prettier-plugin-tailwindcss

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

적용한 모습은 아래와 같다.

// before
<h1 className="w-full bg-white font-medium shadow h-5 flex text-base">
// after
<h1 className="flex h-5 w-full bg-white text-base font-medium shadow">

🎨 Customization

위에서 내게 필요한 특정 값을 Tailwind에서 제공하지 않는 경우 사용할 수 있는 첫 번째 방법으로 대괄호 []를 언급했었다. 한두 번 쓰고 말 거라면 이 방법도 나쁘지 않지만, 여러 번 반복된다면 상당히 번거로울 것이다.

그럴 땐 두 번째 방법인 커스터마이징을 활용하자! tailwind.config.js 파일에 들어가서 theme의 extend, color, fontFamily에 내가 자주 쓰는 속성과 값들을 추가해주면 된다.

예를 들어 아래와 같이 커스터마이징을 했다면

//tailwind.config.js

theme: {
  extend: {
    height: {
      screen: "100dvh",
    },
    borderRadius: {
      '4xl': '2rem',
    },
    boxShadow: {
      DEFAULT: "0px 2px 4px 0px rgba(0, 0, 0, 0.20)",
    },
  },
  colors: {
    white: "#ffffff",
    gray: {
      100: "#F5F6F8",
      200: "#E9EBF0",
      300: "#DADCE2",
    },
    black: "#000000",
  },
  fontFamily: {
    sans: ['Graphik', 'sans-serif'],
  },
}

이런 식으로 사용할 수 있다

<div className="h-screen bg-white">
  <div className="rounded-4xl shadow bg-gray-100 ">
    <p className="text-black font-sans">우왕</p>
  </div>
</div>

h-screen (height), shadow (boxShadow), font-sans (fontFamily)처럼 기존에 있던 클래스에 내가 원하는 값을 덮어씌워도 되고 rounded-4xl (borderRadius)처럼 새로운 클래스를 추가해도 된다. 색상의 경우 색상 이름과 함께 shade를 설정해서 bg-gray-100처럼 사용할 수도 있다.

Arbitrary value 사용 줄이기

사실 sm, xl 같은 키워드들을 사용하다 보면 한눈에 구체적인 값을 알 수 없어 꽤나 헷갈린다. 이번 해커톤에서도 '저거 대신 픽셀 단위로 된 숫자였으면...'하는 생각이 여러 번 들었다. 그렇다고 매번 대괄호를 씌우는 건 너무 귀찮고 비효율적인 짓이었다. 픽셀 단위로 커스터마이징이 필요한 속성들은 값의 범위가 크기 때문에 일일이 커스터마이징하기도 어렵다.

다행히 이 글을 쓰면서 추가자료를 찾다가 아주 괜찮은 해결방안을 하나 발견했다.

// tailwind.config.js

const px0_50 = { ...Array.from(Array(51)).map((_, i) => `${i}px`) };
const px0_100 = { ...Array.from(Array(101)).map((_, i) => `${i}px`) };
const px0_200 = { ...Array.from(Array(201)).map((_, i) => `${i}px`) };
const px0_400 = { ...Array.from(Array(401)).map((_, i) => `${i}px`) };

module.exports = {
  theme: {
    extend: {
      borderRadius: px0_50,
      fontSize: px0_100,
      spacing: px0_200,
      width: px0_400,
      ...
    }
  }
}

위 방법을 쓰면 큰 범위의 값도 한번에 커스터마이징이 가능하고, 아래처럼 스타일을 보다 직관적으로 적용할 수 있다.

// before
<div className="w-[350px] rounded p-[15px] text-base">
// after
<div className="w-350 rounded-4 p-15 text-16">

📃 Reference

tainwindcss - Install Tailwind CSS with Next.js
GitHub - tailwindlabs/prettier-plugin-tailwindcss
Tailwind CSS 사용기
Peer Dependencies에 대하여