[NextJS] CSS을 사용하는 방법 - Tailwind CSS

 

 

 

 

NextJS가 밀어주는 스타일링 방법

본래 CSS-in-JS 마저 안 쓰고 있던 난 최근에 Tailwind CSS라는 새로운 프론트 기술을 알게 됐다.

알게 되는건 좋으나 지금도 불편함을 느끼지 않았기에 도입할 생각이 없었다.

Next 공식 문서에서 한 단어를 보게 되기 전까지는 말이다. 

 

https://nextjs.org/docs/app/building-your-application/styling/tailwind-css

exceptionally라는 부사를 붙일 정도로 Next에서 적극 추천한다.

이야...

이건 못 참지 😋

 

바로 공식문서에 나온 코드 그대로 실행하려고 하다가 bun이라는 걸 기억하고 bun 공식문서엔 따로 적혀 있는게 없어서 걍 아래와 같이 코드를 쳤다.

 

bun install tailwindcss postcss autoprefixer
bun tailwindcss init -p

tailwind.config.js 파일이 생성됐으면

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './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: [],
}

공식문서에서 가져온 코드 그대로 넣어준다.

그리고 아마 globals.css에 

 

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

있을건데 없다면 추가해주자.

다 했다면 인제 tailwind를 사용해서 간단하게 css를 해보도록 하자.

 

 

tailwind 쓰는 방법

bootstrap을 써본 적이 있다면 tailwind을 이해하기 쉽다.

bootstrap처럼 정해진 약속된 단어를 사용하면 tailwind는 그에 맞는 스타일링을 해준다.

 

div 하나에 margin을 주고 싶다. 

예전이었으면 margin: 10px 이렇게 주었을 것이다.

 

tailwind를 쓸 경우 className=m-2 혹은 m-3을 사용해주면 된다.

정확히 10px를 써야 한다면 커스텀으로 2.5을 10px로 지정하는 방법도 있긴 하다.

 

매우 익숙하지 않아 도큐먼트를 열심히 봤다 😅

하지만 한 번 익숙해지면 빠르게 적용시킬 수 있어 속도가 붙는다.

예상한 시간보다 더 빨리 css를 끝낼 수 있어서 좋았다. 

 

 

 

 

커스텀 CSS

잠깐 써보면서 좋다고 느낀 기능 중 하나는 커스텀을 저장했다가 나중에 불러올 수 있는거다.

대체로 서비스마다 고유의 컬러나 폰트가 있다. 

한 번씩 잊어버리면 피그마나 노션에 적어놓은걸 찾아야 했는데 tailwind에선 이를 간편하게 제공한다.

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './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: {
      colors: {
        'shipper-color-one': '#F24822' // 사용자정의 넣기
      }
    },
  },
  plugins: [],
}

 

tailwind.config.js에 보면 theme이 있다.

여기에서 컬러의 경우 본인이 쓰기 편한 명칭과 그에 맞는 컬러를 넣으면

 

<button className="w-full p-3 text-white rounded mt-4 bg-shipper-color-one">완료</button>

쓰고자 하는 곳에 bg-(사용자 정의 명칭)을 넣으면 된다.

👍

 

 

 

 

꿀팁

tailwind에서 제공해주는 플러그인을 사용하자.

이걸 사용해줄 경우 입력한 문자로 시작하는 클래스 명을 미리 보여준다.

 

재배열 시켜주는 이 플러그인도 추천하다.

 

 <button className="w-full p-3 text-white rounded mt-4 bg-shipper-color-one">완료</button>

이렇게 내 맘대로 썼다면 저장을 함과 동시에 

 

<button className="w-full p-3 mt-4 text-white rounded bg-shipper-color-one">완료</button>

이렇게 바꿔준다.

함께 작업하는 경우 공통된 정리 플러그인을 써주면 작업하기에 편하다 👍

 

 

 

 

 

 

fin.