[NextJs] NextJs에 TailwindCss 적용 하기

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

1. 프로젝트 생성

- 프로젝트가 없는 경우 프로젝트부터 생성해준다.

npx create-next-app my-project
cd my-project

2. postcss , autoprefixer와 함께 TailwindCss 설치

npm install -D tailwindcss postcss autoprefixer

3. Tailwind configs 파일을 만들기 위한 초기화 command 입력

npx tailwindcss init -p

4. 확장 프로그램 PostCSS Language Support 다운

- VSCode에서는  global.css에 @tailwind를 추가하면 "Unknown at rule @tailwind" 라는 경고가 발생한다.

@tailwind 키워드를 알 수 없는 키워드로 분류하기 때문이다. 확장 프로그램 PostCSS Language Support 를 다운받으면 경고 문구가 보이지 않는다.

(다른 해결 방법들 https://imkh.dev/vue-tailwind-rule/https://velog.io/@jinsunkimdev/React%EC%97%90%EC%84%9C-TailwindCSS-%EC%82%AC%EC%9A%A9-%EC%8B%9C-warning-Unknown-at-rule-tailwind-css  )

5. Tailwind.configs.js

- Tailwind.configs.js 파일에서 Tailwind를 적용시키킬 파일들의 path 설정

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. global.css에 @tailwind 추가 

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

7.  tailwindcss 사용하기

공식 사이트에서 적용하고 싶은 style을 검색하면 

Tailwind에서 쓰이는 문법을 확인할 수 있다.

 

특정 px을 적용하고 싶다면 아래와 같이 대괄호 안에 표기할 수 있다.

<div class="m-[5px]"></div>

 

TailwindCss 적용 예시

[ TailwindCss 적용 전 ] - Detail.tsx

export default function Detail({...}) {
  ...
  return (
    <div className={`${styles.container}`}>
      <p className={`${styles.title}`}>{title} </p>
      <div className={`${styles.bottom}`}>
          <img
            className={`${styles.poster}`}
            src={...}
          />
        )}
        <p className={`${styles.content}`}>{content}</p>
      </div>
    </div>
  );
}

[ TailwindCss 적용 전 ] - Detail.module.css

.container {
  width: 100%;
  text-align: center;
}
.title {
  font-size: 20px;
  font-weight: 700;
}
.bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
} 
.poster {
  max-width: 100%;
  border-radius: 20px;
  margin: 10px 20px 30px 20px;
}
.content {
  width: 50%;
  line-height: 25px;
}

TailwindCss 적용 후

export default function Detail({...}) {
  ...
  return (
    <div className="w-full text-center">
      <p className="text-[20px] font-bold mb-[10px]">{title} </p>
      <div className="flex items-center justify-center mx-auto my-0 mt-[50px] w-4/5">
          <img
            className="max-w-full rounded-[20px] mt-[10px] mx-[20px] mb-[30px]"
            src={...}
          />
        )}
        <p className="leading-[25px] w-1/2">{content}</p>
      </div>
    </div>
  );
}

위처럼 작성하고 나면 css 파일은 작성하지 않아도 된다.

정말 무궁무진한 개발의 세계...🥹🥹

 

<div className="flex items-center justify-center mx-auto my-0 mt-[50px] w-4/5"></div>

그러나 위처럼 inline css가 길어지는 것과 비슷한 가독성 저하와 재사용 불가의 문제가 있다.

다음 포스팅에서는 tailwind에서 제공하는 'components'를 이용해서 가독성과 재사용성을 높여보겠다.