들어가기에 앞서
기존에 리액트로 만들어두었던 포켓몬 프로젝트를 Next.js로 마이그레이션을 하려니 기존에 사용하던 코드들이 마음에 매우 안들었습니다. tailwind + styledComponent를 사용한 조합이 완성이 되었습니다. 따라서 이번에는 기존 프로젝트를 마이그레이션할 때 tatilwind만 사용이 가능하도록 변경하였습니다.
Next App을 만들때 tailwind를 체크를 안했을 경우부터 시작합니다. 공식문서를 따라갑니다.
추가를 하였을 경우 사용 방법부터 확인하면 됩니다.
Next 프로젝트 설치
npx create-next-app@latest --typescript
tailwind를 추가하지 않고 설치를 하였습니다.
체크를 하기전과 하고났을 때의 설치 비교입니다. 왼쪽 사진이 설치를 눌렀을 경우 오른쪽이 설치를 누르지 않았을 경우입니다.
왼쪽과 같은 경우에 tailwind를 사용할 수 없습니다. 따라서 따로 설치를 해주어야 합니다. 다음 명령어를 통하여 tailwindcss와 postcss를 설치해주었습니다. 그럼 해당하느 ㄴ파일 두 개가 위 오른쪽 사진과 같이 추가가 됩니다.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p설치가 끝난 이후에는 tailwind.config.js에 어느 파일에 해당 코드들이 들어가있는지 알려주어야 합니다. content란에 해당 경로들을 추가함으로서 파일이 있는 곳을 알려줍니다. src 폴더에 만들었다면 해당 코드만 추가해도 무방합니다.
/** @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 : []
};이제 해당 코드를 css에 적용하기위해서 불러와주어야합니다. global.css에 해당 문구를 추가해줍니다.
@tailwind base;
@tailwind components;
@tailwind utilities;global.css 같은 경우 페이지 전체에서 불러와서 사용해야하니 최상단 컴포넌트에 추가해줍니다. 저같은 경우 RootLayout에 추가 해주었습니다.
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}사용 방법
tailwind css를 적용할려면 기본적으로 정해져있는 클래스를 등록해서 사용을 하면됩니다. 하지만 리액트에서부터는 class자체가 javaScript 예약어이기 때문에 사용을 하지 못합니다. 따라서 className으로 사용을 해주면 됩니다.
export default function Home() {
return (
<main>
<h4 className={'text-gray-600'}>Hello World</h4>
</main>
)
}
커스텀 tailwind 적용방법
tailwind의 수많은 클래스들이 있고 이것들을 이용하여 개발을 하는데에 소모하는 시간을 감소시켜주는 것은 개발자들에게 있어서 매우 편리합니다. 하지만 색상과 같이 경우의수가 1600만이 되는 것들을 tailwind 라이브러리가 해당 스타일을 모두 가지고있진 않습니다. 따라서 우리가 직접 만들어서 사용해줄 필요가 있습니다.
const typeColor : {
fire: '#FF8C00',
water: '#6495ED',
grass: '#32CD32'
}다음과 같은 색상들을 tailwind에 적용을 시켜주고 싶습니다. 이러한 경우 다음과 같은 방법을 사용하면 됩니다.
tailwind.config 파일에 커스텀 내용들을 올릴 수 있습니다. 하지만 (1) 과 같이 어떻게 사용할지가 중요합니다.
theme: {
backgroundColor: { (1) },
extend: {
backgroundColor: { (2) }
},
}(1) 에 추가를 한경우 기본 색상이 비활성화가 됩니다. 따라서 기본 색상을 유지한채로 색상을 이나 다른 값들을 추가하고 싶다면 (2)에 추가를 하면 됩니다.
이제 사용하는 방법입니다.
const HeaderLayouy = () => (
<header className={'h-14 bg-fire z-20 relative'}>
<nav>
<Link className={'header-nav-btn'} href={'/board'}>자유게시판</Link>
<Link className={'header-nav-btn'} href={'/document'}>도감</Link>
<Link className={'header-nav-btn'} href={'/game'}>게임</Link>
</nav>
</header>
)여기서 우리는 의문점이 들어야합니다. bg가 갑자기 왜 튀어나온거지? 내가 추가한 것은 backgroundColor인데 왜 추가된 것일까?
놀랍게도 해답은 공식문서에 전부 있습니다.
만약 폰트 색깔도 변경을 하고싶은데 어떻게 변경을 해야할지 모르겠다 하면 검색을 하면 됩니다.
<header className={'h-14 bg-fire z-20 relative'}>
<nav className={'h-14'}>
<Link className={'header-nav-btn color-fire text-water'} href={'/board'}>자유게시판</Link>
<Link className={'header-nav-btn'} href={'/document'}>도감</Link>
<Link className={'header-nav-btn'} href={'/game'}>게임</Link>
</nav>
</header>tailwind 개별 css 합치기
반복적으로 사용되는 클래스들이 있을 때, 예를 들어 버튼을 하나 만드는 데 css가 클래스네임이 100자가 쓰여진다면 버튼이 4개를 만들면 400자가 쓰여집니다. 이럴경우 다음과 같이 @layer components를 사용하여 만들 수 있습니다.
@layer componets {
.header-nav-btn {
@apply relative top-4 bg-amber-50 rounded-md p-2 m-2.5 font-bold text-white hover:bg-blue
}
}const HeaderLayouy = () => (
<header className={'h-14 bg-superRed z-20 relative'}>
<nav>
<Link className={'header-nav-btn'} href={'/board'}>자유게시판</Link>
<Link className={'header-nav-btn'} href={'/document'}>도감</Link>
<Link className={'header-nav-btn'} href={'/game'}>게임</Link>
</nav>
</header>
)Tip. tailwind css는 가져와지는데 적용이 안되는 경우
content의 path값을 확인을 해보아야합니다. Next-js의 경우 src폴더 안에 들어가있을 경우 다음과 같은 경로를 수정을 해주면됩니다. 하지만 필자는 확인하지 못해 에러를 1시간동안 찾아다녔습니다.
바뀐 코드
const config = {
content: [
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}'
],
theme : {},
plugins: []
}