[Next.js 13] tailwind css Plugin 작성 & 적용

NextJS 대표로고

 

---

접근 (요약)

현재 개발중인 프로젝트에서 Next.js 13버전과 TypeScript 를 기술스택으로 갖고, 이에 더불어 Tailwind CSS를 사용하고 있습니다. 필요한 컴포넌트를 Tailwind CSS에서 가져다가 사용하려는 찰나, 프로젝트 내부 tailwind.config.ts 파일에 Plugin 부분을 추가하란 안내를 따라가봅니다.

 

 

  1. (상황) Tailwind css 컴포넌트 사용 필요

      (1.1) 컴포넌트 코드 내부

 

  2. Tailwind CSS Plugin 추가 & 설치

      (2.1). npm install @플러그인명

      (2.2). tailwind.config.ts 파일에 플러그인 추가

---

방법

  1. (상황) Tailwind css 컴포넌트 사용 필요

      (1.1) 컴포넌트 코드 내부

/*
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
*/

Plugin 부분에 아래와 같이 "require('@tailwindcss/forms')" 이를 추가해달란 안내이다.

---

  2. Tailwind CSS Plugin 추가 & 설치

      (2.1). npm install @플러그인명

## 설치하기

npm i @tailwindcss/forms

 

      (2.2). tailwind.config.ts 파일에 플러그인 추가

/*
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
*/

 

---

이상으로, NextJS 내 TailwindCSS 사용시 컴포넌트에 따른 플러그인 추가를 학습해봤습니다.

추가 질문을 댓글을 달아주시면 감사하겠습니다^^

오늘도 파이팅입니다!