[tailwind | v3] 테일윈드 사용하기 with Next.js(v12)

사용하기 이전에 여러분이 사용하는 테일윈드의 버전과 변경사항 그리고 docs는 어디를 기준으로 작성되어있는 지 확인하시는 작업이 필요합니다. 제가 사용한 테일윈드 버전은 3 이며, next는 12.2.2 입니다.  

예시로 만약 제가 next13을 사용한다면 , app 경로의 파일들을 인식할 수 있게 "./app/**/*.{js,ts,jsx,tsx}"를 추가로 넣어주어야 겠죠.

//tailwind.config.js 

//(코드 중략)
content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

하지만 전 next12버전을 쓰기 때문에 app 관련 경로를 넣어줄 필요가 없습니다. 마이그레이션을 한다면 추가로 넣어주면 되겠네요. 그런건 모르겠고 걱정이 되신다면 그냥 넣어주시면 됩니다.(전 안넣었음🙄) 2022 11 10 기준, 테일윈드와 넥스트를 같이 쓸 때 관련 세팅은  테일윈드 docs에 나와있습니다. docs에서는 위와 같이 세팅하라고 안내되어있습니다. 

---

tailwind.css 는 CSS 프레임워크로 인라인 스타일을 사용하는 것처럼 쉽고 빠르게 스타일링을 할 수 있으면서도 디자인 시스템만큼 일관된 디자인을 가능하게 해줍니다. 대표 사용처로는 Github과 Nuxt.js 공식 사이트를 들 수 있습니다. styled-compoenents등과 같이 작은 스타일 변경에도 컴포넌트를 만들어야 하는 번거로움에 지쳤거나 매번 클래스명을 작명하는 것에 골머리를 앓았다면 좋은 선택이될 수 있습니다. 

Tailwind CSS 란 무엇인가? 

Utility-First 컨셉을 가진 CSS 프레임워크입니다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링할 수 있습니다. 

예시

<button class="py-2 px-4 rounded-lg shadow-md text-white bg-blue-500">
  Click me
</button>

장점 

🌷Utility-First의  편리함과 빠른 개발 

테일윈드의 메인 컨셉이자 가장 빠른 장점입니다. 빠르게 원하는 디자인을 개발할 수 있습니다.

스타일 코드도 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요도 없습니다. 

또한, 원하는 태그의 스타일을 변경하기 위해 클래스명을 검색해가며 일일이 필요한 CSS코드를 찾을 수고도 덜 수 있습니다. 

마크업을 하다보면 반드시 겪게되는 고충 중 하나는 랩핑하는 태그의 클래스명을 고민하는 일입니다. BEM, OOCSS 등의 방법론이 나올 정도로 클래스명을 짓는 일은 까다롭습니다. 테일윈드를 사용하면 랩핑 태그의 클래스명을 사용할 일이 거의 없으므로 container, wrapper, inner-wrapper 와 같은 클래스명을 고민하지 않아도 됩니다.

 

🌷일관된 디자인 

모든 곳에서 동일한 색상이나 사이즈, 간격 등의 유틸리티 클래스를 사용하므로 일관된 스타일로 구현하기 쉽습니다. 

🌷쉽고 자유로운 커스텀

테일윈드 CSS는 다른 프레임워크에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀할 수 있습니다.

커스텀을 할 때 기본 스타일 값을 수정하는 방식이기 때문에 디자인의 일관성을 해치지도 않습니다. 덕분에 디자인 시스템이나 다크 모드 구현도 간편합니다. 

🌷로우 레벨의 스타일 제공

각 CSS 요소 수준의 유틸리티 클래스를 제공하기 때문에 세밀하게 원하는 디자인을 구현할  수 있습니다. 

 

🌷IntelliSense (테일윈드 자동완성 플러그인)

로우 레벨의 스타일을 제공한다는 것은 거의 모든 스타일의 유틸리티 클래스를 학습해야 한다는 의미와 같습니다. 

이러한 불편을 해소하기 위해 InteliSense 플러그인을 사용하면 미리보기, 자동완성, 신택스 하이라이팅, 린팅을 제공하기 때문에 조금만 익숙해지면 금서 문서없이 개발이 가능합니다. -> vscode에서 제공하는 기본 intellisense 가 아니라 tailwind CSS intellisense 라고 vscode 마켓에서 검색하여 플러그인을 직접 설치하셔야 합니다.

 

단점

😥못생긴 코드(직관적X)

코드가 인라인처럼 HTML 코드에 같이 붙어있기 때문에 못생겼습니다. 

 

😥초반 클래스명 러닝 커브 

관련 플러그인을 제공하기 때문에 조금만 사용하다보면 익숙해지지 않을까 싶습니다. 

 

😥JS 코드 사용 불가

클래스명을 분기 처리하여 동적으로 스탕일링을 설정할 수는 있지만 Styled-component와 같이 JS 변수 값에 따라 가로 길이를 설정하는 등의 구현은 가능하기는 하지만 무척 번거로운 설정이 필요합니다. 

 

😥HTML 과 CSS 코드 혼재

못생긴 코드의 연장선이라고 생각합니다. 

 

---

설치하기

사용하는 프레임워크나 도구에 따라 설치 방법이 조금씩 다르므로 공식문서를 참고해서 설치해야 합니다. 

-> 저는 Next.js

 

기본적으로 PostCSS 플러그인으로 설치할 것을 권장합니다. PostCSS를 사용할 수 없는 환경일 경우에 다른 방법으로 설치가능하나 PostCSS를 사용하면 auto prefix와 같이 편리한 기능을 사용할 수 있기 때문에 추천한다고 합니다. 

PostCSS? JS 플러그인을 통해 스타일을 변형하는 도구입니다. 

테일윈드 CSS v2부터는 IE를 지원하지 않기 때문에 postCSS의 autoprefixer 등을 함께 사용해야 합니다. 

아래의 명령어는 next.js 와 같이 사용할 시, 세팅하는 방법입니다. 다른 프레임워크를 사용하신다면 공식 문서를 참고하시길 바랍니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p //// 프로젝트 루트에 설정 파일이 생성된다. 기본 스타일이나 플러그인 등을 설정할 수 있음

PostCSS 플러그인에 Tailwind CSS 추가하기 

• postcss.config.js 컨피그 파일을 따로 만들게되면 넥스트가 내부적으로 기본으로 하던 동작이 동작하지 않게 됩니다. 필요 기능이 있다면 직접 플러그인을 통해 설치해야한다네요. 관련 내용
• Next.js관련 세팅 예시

// postcss.config.js 등의 postcss 설정 파일
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

테일윈드 설정 파일

아래와 같이 설정해주면 된다. (다크 모드를 쓸 것이라면 true)

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Tailwind CSS 스타일 추가하기

메인 CSS 파일에 아래의 코드를 추가하여 Tailwind CSS 스타일을 추가합니다.

@tailwind 디렉티브는 빌드 시에 CSS 코드로 변환됩니다.

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

React나 Vue와 같이 CSS 파일을 JS에 직접 임포트할 수 있는 경우에는 아래와 같이 JS 코드에서 직접 임포트할 수 있습니다.

// app.js
import "tailwindcss/tailwind.css";

 

기본 설정 커스텀하기 

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
      serif: ["Merriweather", "serif"],
    },
  },
};

기본 설정 with extend 객체 

기본 스타일을 설정할 때 주의점은 실수로 기본 스타일 값을 오버라이딩하지 않는 것입니다. 

*오버라이딩 -> 간단히 말하면 덮어쓰기 입니다. 

extend 객체 안에 넣어주지 않으면 기본 스타일 값이 덮어써지므로 아래와 같이 extend 를 잘 활용할 것 

이 부분은 제가 아직 써보지않아 이해가 잘 되지 않는데 직접 사용해보면 감이 올 듯 합니다. 공식 문서를 참고하셔도 좋습니다. 

module.exports = {
  ...
  theme: {
    ...
    extend: {
      colors: {
        primary: '#8ffebf',
      },
      ...
    },
  },
  variants: {
    extend: {
      borderWidth: ['hover'],
    },
  },
  ...
}

 

 

😥테일윈드 적용이 안되는 이슈 (테일윈드 v3의 변경사항 관련 이슈)

tailwind "purge" 옵션을 추가로 아래에 넣어주었습니다. 이건 docs에 추가되어 있던 옵션은 아니고 기본세팅에서 제가 자체적으로 추가하여 넣어주었습니다. css를 최적화해주는 것이니까요(하지만 🐕같이 멸망). 

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  purge: [ 어쩌구 ]
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
};

 

// styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

 

기본적으로 doc와 어떤 것을 다르게 실행했는 지 확인해보다가 기본적으로 내가 해당 패키지들을 제대로 설치했는 지 부터 확인해봤습니다. 

• 패키지들은 정상적으로 설치가 되어있음
• postcss.config.js 와 tailwind.config.js 에 경로(path) 제대로 쓰여있는 지도 확인완료

vscode 터미널을 보니 문제에 원인이 되는 내용인 거 같아 해당 링크를 통해 확인해봤습니다.

 오류 내용 전문

warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate thiwarn -
No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

간단 해석: purge와 content 옵션이 테일윈드 v3부터 변경되었단다. 네 소스 파일에는 utility 클래스가 감지되지 않넹 컨텐트 옵션을 확인해봐 (링크) 

warn 의 내용은 코드를 돌리는 데에는 문제가 되지 않아서 크게 신경쓰지 않던 부분인데 이렇게 오류를 내지않지만 동작이 안될 때에는 유심히 봐야합니다.  vscode에서 지적해준 것은 2가지(테일윈드 v3부터 변경 사항이 있는 애들)

1. content 옵션 -> 여기에 테일윈드CSS를 적용시킨다는 의미라고 간단하게 이해 해당 경로에 확장자를 인식하는 거 같습니다.
2. purge 옵션 -> 테일윈드v3부터는 더 이상 지원하지 않는다고 합니다. content에 병합 이미 적용

해결

content에 있는 경로 문제는 딱히 문제가 되진 않았습니다. 이미 purge 옵션만 없애주었더니 정상작동이 되더군요..

하지만 warn을 없애기 위해서 좀만 찾아보니 테일윈드를 적용시킬 확장자를 찾지못해서 그런거였습니다. 

/pages/ ~ {js,ts,jsx,tsx} 뒤에 html만 붙여주면 warn은 사라집니다. components 파일에는 .html을 두지 않으므로 굳이 두번째 줄에도 html을 추가해줄 필요는 없겠죠. 필요에 따라 추가할 수 있겠습니다. 

//tailwind.config.css
content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

 

더 많은 내용은 해당 블로그를 통해 확인해보실 수 있습니다! 

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

Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log