nextjs는 nextjs 13 version에서 릴리즈된 app router를 이후로 tailwindcss를 사용하는 것을 권장하는 듯한 움직임을 보여왔습니다.
nextjs 애플리케이션을 쉽게 시작할 수 있도록 도와주는 create-next-app 명령어에서도 tailwindcss를 사용할것인지를 물어볼만큼 권장하는것으로 보여지는데요
오늘은 nextjs tailwindcss를 같이 사용하는 방법을 알아보도록 하겠습니다.
create-next-app으로 시작하기
npx create-next-app@latest
위 명령어를 터미널에 작성하면 아래와 같은 질문사항들이 등장합니다.
✔ What is your project named? … dsa
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
여기에서 Yes를 선택해주면 기본적으로 tailwindcss에 대한 설정이 완료된 보일러플레이트가 설치되기 때문에 따로 설정이 필요없습니다.
tailwindcss를 안쓰고있던 프로젝트에서 tailwindcss 도입하기
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
다음과 같이 의존성을 설치하고 init을 수행합니다.
tailwindcss는 내부적으로 postcss , autoprefixer에 의존이 있기때문에 두 라이브러리도 함께 설치합니다.
tailwind.config.ts
/** @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.ts를 루트에 만들고 작성해줍니다.
content안에 들어가는 배열은 테일윈드를 사용하는 폴더가 어느 폴더인지 알려주는 일입니다.
만약 저 content안에 포함되지 않는 곳에서 테일윈드를 사용하려고하면 적용이 안되니 유의가 필요하겠습니다.
@tailwind base;
@tailwind components;
@tailwind utilities;이제 css 파일을 만들어준뒤 다음과 같이 코드를 작성합니다.
import type { Metadata } from 'next'
// These styles apply to every route in the application
import './globals.css'
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>{children}</body>
</html>
)
}그리고 만들어둔 css 파일을 approuter라면 위와같은 layout에서 임포트를
만약 pagesrouter를 사용중이라면 _app.tsx에서 임포트를 수행합니다.
// These styles apply to every route in the application
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}nextjs tailwindcss 꿀팁
공식문서에서 사용법 찾아보기
tailwindcss docs를 참고하면 내가 원하는 css속성이 테일윈드에서는 어떻게 사용하면 되는지를 알 수 있습니다.
사실 css를 작성하다보면 가장 많이 작성하게 되는 것은 flex, grid와 같은 내용과 absolute, relative와 같은 포지션 내용이기도합니다.
다양한 기능들이 존재하지만 가장 많이 사용하는 것들만 사용하면서 자연스럽게 익히시다보면 tailwindcss가 정말 편하게 느껴지실거에요
tailwindcss generator 사이트들 사용하기
tailwindcss color generator와 같은 사이트에서는 원하는 색상을 집어넣으면
해당 색상을 토대로 자주 사용하게되는 UI들에 대한 css를 제너레이팅하여 복사할 수 있는 형태로 제공해줍니다.
이러한 사이트들을 활용하면 빠르게 원하는 코드들을 얻을 수 있어 편리한 점이 있어요
shadcnui의 구현 참고하기
shadcn/ui는 2023년도부터 많은 개발자들의 사랑을 받은 오픈소스 UI 라이브러리에요
그런데 shadcn/ui는 radix primitives라는 라이브러리를 기반으로하여 tailwindcss를 이용해서 UI 들을 구현했답니다.
shadcnui는 tailwindcss를 이용해서 복잡한 컴포넌트를 구현할 때에 어떻게 css를 작성해야하는지를 잘 보여주는 하나의 교보재이기도해요
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] ~...",
className
)}
{...props}
>
예를 들면 shadcnui에서 dialog를 구현한 예시를 보면 이런 코드가 존재해요 여기에서 자세히 살펴보면 이런 클래스네임 세트를 확인할 수 있어요
"fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]"이 코드는 요소를 fixed로 만든뒤 left 50 top 50 즉 중앙에 배치시킨 다음 translate x ,y를 각각 -50%하여 정확히 정중앙에 요소를 배치시키는 코드에요
그리고 z-50으로 z index를 높여서 되도록 상단에 표시되도록 코드를 작성한것이죠
이러한 테크닉들은 UI를 구현할 때에 매우 유용하게 사용되니 시간이 날때 shadcn/ui의 구현을 참고해보면 도움이 될거에요
마치며
오늘은 next.js에서 tailwindcss를 사용하는 방법과 tailwindcss를 어떻게하면 잘 배우고 사용할 수 있을지에 대한 내용을 다루어보았습니다.
부디 도움이 되셨기를 바라며 글 마치도록 하겠습니다.
읽어주셔서 감사합니다.
