Global styles

/app/ui 폴더 안에 global.css 파일이 있다. 전역적으로 CSS를 적용하기 위해서는 이런식으로 파일 하나를 정해서 전역 스타일을 적용해줄 수 있다. 예를들면 CSS reset rules나 site-wide styles for HTML elements like links 같은 경우 말이다.
이 css 파일을 원하는 컴포넌트 어디에든 import할 수 있지만, 가장 좋은 방법은 top-level component에서 import하는 것이다. Next.js에서는 root layout이 그 역할을 한다. (뒤에 더 자세히 나온다. 지금 당장 보고 싶다면 Layout에 대한 내용 참고: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates)

그러니 /app/layout.tsx에 global.css파일을 import해보자. layout이나 page의 이름을 가진 파일들은 Next.js에서 특별한 역할을 하는 파일로 취급된다.

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

이를 저장하고 나면 스타일이 적용되는 것을 확인할 수 있다.
- 그런데 global.css 안에는 특별히 스타일에 대한 내용이 없는데 어떻게 스타일이 적용된 것일까? 바로 tailwind덕분에 가능하다.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
...
```

Tailwind

Tailwind는 TSX 마크업에 직접적으로 utility classes를 작성하여 빠르게 개발할 수 있도록 도와주는 CSS framework다.
Tailwind에서는 클래스 이름을 추가함으로써 요소에 스타일을 적용할 수 있다. 예를들어 아래 코드는 h1 텍스트를 파란색으로 바꾼다.
```
<h1 className="text-blue-500">I'm blue!</h1>
```
Tailwind에서 클래스는 각 요소에 개별 적용되기 때문에 style collisions에 대해 걱정할 필요가 없다고 한다.
create-next-app을 통해 Next.js 프로젝트를 시작할때, Tailwind를 사용할 것인지를 물어본다. 만약 yes를 선택하면 필요한 Tainwind 패키지와 설정이 자동으로 설치된다.

프로젝트에서 /app/page.tsx를 보면 아래와 같이 tailwind class가 적용되어 있는 것을 확인할 수 있을 것이다.

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // These are Tailwind classes:
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}