Next.js 프로젝트에 tailwind css 추가하기

tailwind css와 유틸리티 클래스란?

기존에 CSS 로만 진행하던 프로젝트에서 ui의 통일성과 재사용성을 고려하여 tailwind css를 도입하기로 했다.

tailwind css는 클래스로 구성된 유틸리티 중심의 CSS 프레임워크이다. 유틸리티 클래스란 버튼, 모달 등과 같이 무언가를 구성하기 위한 css가 아닌 빨간색 글자 색상, xl 사이즈의 글자 크기 등과 같이 하나의 css에 정의된 속성과 값을 가지는 걸 의미한다. 즉, 유틸리티 우선이라고 하는 것은 사용자가 원하는 각각의 속성값을 적용하여 하나를 만들어내 것이다.

 

tailwind css 장점

• HTML 코드 안에 CSS가 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없다. 
• 클래스명을 고민하지 않아도 된다.
• 모든 곳에서 동일한 색상이나 사이즈, 간격 등의 유틸리티 클래스를 사용하므로 일관된 스타일로 구현하기가 수월하다.
• Tailwind CSS는 다른 프레임워크들에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀이 가능하다. 커스텀을 할 때 기본 스타일 값을 수정하는 방식이기에 디자인 일관성도 해치지 않는다. 덕분에 디자인 시스템이나 다크 모드 구현도 간편하다.

 

tailwind css 단점

• 클래스명을 사용해 스타일을 적용하기 때문에 클래스명을 익혀야한다.
  • 이러한 불편함을 해소하기 위해 Intelli Sense 플러그인을 제공한다. 미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원하기 때문에 조금만 익숙해지면 금방 문서 없이 개발할 수 있다.
• 클래스명을 분기 처리하여 동적으로 스타일링을 설정할 수는 있지만 굉장히 번거롭다.

 

tailwind css 설치하기

Tailwind CSS를 설치하는 방법은 각각의 라이브러리나 프레임워크에 맞게 설치하고, 설정할 수 있도록 공식 문서에 아주 자세히 나와있다. 그 중 이번 포스팅에서는 Next.js에서 Tailwind CSS를 설치하는 방법만 정리해보겠다.

 

먼저 터미널을 통해 Tailwind CSS를 설치한다.

//npm
npm install -D tailwindcss postcss autoprefixer

//yarn
yarn add -D tailwindcss postcss autoprefixer

 

아래 명령어를 통해 Tailwind CSS에서 필요한 파일인 tailwind.config.js및 postcss.config.js을 설치해준다.

npx tailwindcss init -p

 

tailwind css를 Next.js 프로젝트에 적용하기

postcss.config.js 및 tailwind.config.js 설정하기

postcss.config.js의 초기 모습은 아래와 같고 사용하고자 하는 플러그인이 있다면 파일내에 추가를 해주면 된다.

이때 postCSS는 JS 플러그인을 사용하여 CSS를 변환시키는 툴이다. postCSS는 언어가 아니라 다양한 플러그인과, 플러그인을 추가할 수 있는 환경을 제공할 뿐이다. postCSS는 플러그인을 사용하여 lint, 변수, mixin을 사용하거나, 인라인 이미지 또는 미래의 CSS 문법을 사용할 수 있다.

//postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

 

tailwind.config.js의 초기모습은 아래와 같고 src폴더가 있냐 없냐에 따라 content 부분에 들어가는 내용이 달라진다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [                       //Tailwind CSS를 사용할 파일에 대한 경로를 추가
    
    //src 폴더가 없는 경우
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    //src 폴더가 있는 경우 
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    
  ],
  theme: {                        //custom theme 설정
    extend: {},
  },
  plugins: [],                    //사용할 플러그인 추가
};

 

global.css 설정

Tailwind의 각 레이어에 대한 지시문을 파일에 추가한다. 각각의 css 파일에 적용해도 되지만 코드의 반복을 줄이는게 중요하기 때문에 global.css에 추가해 의미없는 코드들을 줄여준다!!

이때 @tailwind 디렉티브는 빌드 시에 CSS 코드로 변환된다.

//global.css

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

 

문제는 위 코드를 추가하면 "Unknown at rule @tailwind" 라는 warning이 뜬다. 보기 싫기 때문에 제거해주도록 하자. 아주 쉽게 확장 프로그램 중 "PostCSS Language Support" 을 설치하면 바로 경고창이 사라진다.

 

이렇게 다 적용을 했는데 왜 tailwind css 적용이 안되지???

위 처럼 적용을 했고 오타도 없는데 Tailwind CSS가 적용이 안됐다. 그래서 알아본 결과 cache가 남아있어서 그럴수도 있다고 해서 .next를 삭제했고 다시 npm run dev로 실행하자 .next가 다시 깔렸다. 이후 확인한 프로젝트에서는 Tailwind CSS가 적용이 되어있었다!!

 

tailwind css 확장 프로그램

1. Tailwind CSS IntelliSense

위에서 말했듯이 클래스명으로 css 속성을 지정하기 때문에 클래스명을 알아야 css를 설정할 수 있다. 이 확장 프로그램은 미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원한다.

 

2. Tailwind CSS Highlight Intellisense

이 확장 프로그램은 tailwind가 적용된 class가 있을 경우 점선으로 표시하고 각각의 스타일을 구분할 수 있도록 도와준다.

 

그래서 tailwind css 직접 써보니까 어떠냐면...

 

 

 

 

참고자료

https://wonny.space/writing/dev/hello-tailwind-css

https://jforj.tistory.com/333

PostCSS

https://mingmeng030.tistory.com/275

https://jforj.tistory.com/333