기본 설치
npx create-next-app@latest [원하는 폴더 이름]tailwind css
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p- 13.2 버전에서는 위 명령어를 실행해줬어야 했는데 현재 13.4에서는 자동으로 다 적용되어 있다.
- 심지어 global.css에도 이미 import가 완료되어 있다!
@tailwind base;
@tailwind components;
@tailwind utilities;- tailwind css를 쓰고 싶다면 처음 설정할 때 사용하겠다고 고개 끄덕 100번하고 가면 자동 설치되니 참고하길 바란다.
폰트 Open_Sans로 변경
- 폰트는 global.css가 아닌 layout.tsx에서 변경해준다.
import './globals.css'
import { Open_Sans } from 'next/font/google'
const sans = Open_Sans({ subsets: ['latin'] })
export const 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={sans.className}>{children}</body>
</html>
)
}- next/font/google은 자동 설치니까 거기서 원하는 폰트 가져오는데 난 Open_Sans를 가져왔다.
- 처음에는 inter로 되어있는데 그거를 sans로 변경하여 받아준다.
- return에서 body의
className을sans.className으로 변경해준다.
타겟 es6로 변경
"target": "es6"- 보편적으로 es6가 사용되고 있어 굳이 es5가 아닌 es6로 바꿔준다.
- 낮으면 6~설정한 구버전까지 컴파일하느라 오래 걸린다고 한다.
참고 사이트
쿼카에요