[Nextjs] Tailwind css

Tailwind css 채택 이유?

이전에는 styled-components 를 사용하여서 프론트엔드 스타일링을 처리했는데 이번 nextjs doc를 살펴보면서 css-in-js에서는 server component에 지원되지 않는다고 하여서 nextjs에서 뭔가 밀어주고 있는듯하고 자체적인 config도 지원해주는 tailwind css를 새로운 사이드 프로젝트에 채택하기로 하였다. 

 

redit에서도 tailwind css를 사용해서 빠른 스타일링 개발을 할 수 있다고 개발자들이 이야기 하고 있다.

https://www.reddit.com/r/nextjs/comments/14qhjmq/next_css_module_vs_tailwind/

From the nextjs community on Reddit

Tailwind 적용 방법

현재 nextjs 폴더 안에서 다음과 같이 코드를 실행하면 패키지 설치와 tailwind관련 파일들을 생성해준다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

init 이후에 다음과 같은 파일 두개가 생성된다. 

• tailwind.config.js
• postcss.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: [],
}

위와 같이 tailwind.config.js를 수정해주면 된다.

 

그리고 스타일 적용방법은 global.css 파일에 다음과 같이 맨 상단에 추가해준다.

tailwind 관련 지시어 - https://tailwindcss.com/docs/functions-and-directives#directives

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

그리고 root layout에 global.css를 import 해준다.

// These styles apply to every route in the application
import './globals.css'

그러면 className에 다음과 같이 tailwind의 class를 사용할수 있다.

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}