Next JS에서 tailwind 적용 안될때 해결방법

🤷‍♂️ 본론에 앞서

---

Tailwind란?

Tailwind CSS는 React와 Next 프레임워크에서 많이 사용되는 CSS 프레임 워크입니다.

Tailwind CSS는 ‘utility-first’ 목적을 기반으로 다른 CSS 라이브러리와 달리 CSS 파일 & style 태그를 사용하지 않고 class 속성으로 CSS 스타일링 할 수 있습니다. 

 

Tailwind CSS 사용하는 이유?

Tailwind CSS 프레임워크를 통해서 UI를 빠르고 유연하게 디자인하고 스타일링할 수 있습니다.

class(className) 기반의 화면을 스타일링 하기 때문에 개발자의 생산성과 빠르게 화면을 만들 수 있는 장점이 있습니다. 

 

 

🤷‍♂️ Tailwind 사용법

---

Next.js or React에서 Tailwind CSS 적용하는 방법은 간단합니다. 

 

1. tailwind 설치

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

 

* 위에 명령어를 순서대로 터미널에 입력해서 설치합니다.

 

 

Next JS 보일러플레이트 

https://github.com/yoogukhyeon/next-boilerplate

GitHub - yoogukhyeon/next-boilerplate

 

 

Next JS 보일러플레이트 개념

https://cometruedream.tistory.com/216

보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유

 

 

 

 

 

2. 설치 후에 2개의 파일이 생성됩니다.

 

 

3. 설치 후에 2개의 파일이 생성됩니다.

postcss.config.js

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



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}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

* 위에 2개의 파일에 각각에 값을 적용시키면 Tailwind CSS 사용할 수 있습니다. 

 

4. globals.css 셋팅

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

 

* globals.css 파일에 위에 값도 셋팅을합니다.

 

 

 

🤷‍♂️ Tailwind CSS 적용이 안될때?

---

위에 방식대로 했는데 Tailwind CSS 적용이 안되서 여러가지 삽질을 할수도 있습니다. 

 

Next.js 에서는 globals.css 파일 위치도 중요합니다.

파일위치가 이상하면 Tailwind CSS 적용이 안될 수도 있습니다.

 

출처: Next.js 공식문서

Good to know: This is different from the pages directory, where you can only import global styles inside the  _app.js file.

 

 

 

Next.js 버전마다 파일위치에 차이가 있을수 있지만 파일 위치가 styles 폴더 안에 있거나 다른 폴더 안에 있을수도 있습니다.

Next.js 공식문서에서도 global.css 파일 위치에 대해서 피드백을 주고 있습니다.

쉽게 설명하자면 _app.tsx 파일과 같은 뎁스 위치에 global.css 파일이 위치해 있어야 tailwind CSS 적용 됩니다.

아래와 같이 문제를 해결하는 방법이 있습니다.

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리