#11. Tailwind CSS

Tailwind CSS(opens in a new tab)는 Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.

Install Tailwind CSS with Next.js

4.0 버전 변경된 방식 (With Next.js)

Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss postcss

 

Configure PostCSS Plugins

postcss.config.mjs 파일을 root에 생성하고 아래 내용 작성

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

 

Import Tailwind CSS

Global Stylesheet에 추가합니다.

@import "tailwindcss";

 

3.x버전 방식

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

Configuring Tailwind

root에 있는 tailwind.config.js 파일 내에 Tailwind CSS 클래스 이름을 사용할 파일의 경로를 추가합니다:

파일이 없으면 생성.

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // `app` 디렉토리 추가에 주의하세요.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // 또는 `src` 디렉토리를 사용하는 경우:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

Importing Styles

Global Stylesheet에 추가합니다.

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

 

 

Tailwind CSS 사용을 편리하게 하는 방법

 

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">

 

📃 Reference

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