글로벌 스타일

'/app'파일 안에 'global.css'파일이 있다.
보통 '/app/layout.tsx'파일에서 import해서 사용된다.

전역으로 공통된 스타일들을 지정할 수 있다.

예를 들어 color:"blue" 이런 식으로 글로벌 스타일을 지정하면, 모든 파일의 color가 blue로 설정될 것이다!

만약 tailwind를 사용한다면 이렇게 규칙을 적어야 한다.

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

1. @tailwind base;:Tailwind의 기본 스타일을 포함한다. 브러우저 간의 스타일링 차이를 줄이기 위해 기본 스타일로 초기화(reset)가 포함된다. 이를 통해 모든 브라우저에서 일관된 스타일링을 유지할 수 있다.

2. @tailwind components;: Tailwind의 기본 구성 요소 스타일을 포함한다. 여기에는 버튼, 폼, 카드와 같은 일반적인 UI구성 요소에 대한 기본 스타일이 포함되어 있어, 이러한 요소들을 일관되게 스타일링할 수 있다.

3.@tailwind utilities;: Tailwind의 유틸리티 클래스들을 포함한다. 유틸리티 클래스는 작은 CSS 클래스들로, 특정 스타일 속성을 적용하기 위한 클래스이다. 예를 들어 'text-center'나 'bg-blue-500'같은 클래스들이 이에 해당한다.유틸리티 클래스들을 사용하면 CSS 코드를 재사용 가능하고 효율적으로 관리한다.

이러한 명령어들을 global.css에 포함시키면 tailwind css의 모든 기능을 프로젝트 전체에서 사용할 수 있게 된다.

Tailwind

테일윈드는 유틸리티 클래스를 빠르게 작성할 수 있도록 하여 개발 프로세스를 가속화 하는 CSS 프레임 워크이다.
tsx파일에 직접 추가하여 사용한다.

사용법

<h1 className="text-blue-500">I'm blue!</h1>

className을 추가하여 요소의 스타일을 지정한다.
위와 같은 코드를 입력하면 글자 색이 파랑색인 'I'm blue!'라는 문자가 보인다.

각 클래스는 각 요소에 개별적으로 적용된다.
=> 요소의 추가, 삭제에도 별도의 스타일시트 유지 관리, 스타일 충돌 또는 애플리케이션이 확장됨에 따라 증가하는 CSS 번들 크기에 대해 걱정할 필요가 없다.

새 프로젝트를 시작할 때 create-next-appNext.js는 Tailwind를 사용할지 묻습니다. 를 선택하면 yesNext.js가 자동으로 필요한 패키지를 설치하고 애플리케이션에서 Tailwind를 구성한다.

CSS 모듈

자동으로 고유한 클래스 이름을 만들어서 구성 요소에 CSS범위를 지정할 수 있다.
=> 스타일 충돌에 대해 걱정할 필요가 없어진다.

/app/ui파일에 home.module.css파일이 있다.
home.module.css파일에는

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

이런 코드가 적혀져 있다.

그리고 /app/ui파일에 /app/page.tsx이 있다.

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';//가져오기 
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />//사용
    // ...
  )
}

여기에 CSS모듈파일에서 지정한 클래스 이름을 이런식으로 사용할 수도 있다.

TailWind, CSS 모듈은 Next.js에서 스타일링 하는 일반적인 두 가지이다.
둘 중 하나를 사용하는 건 선택의 자유이다.
심지어 같은 애플리케이션에서 둘 다 사용도 가능하다!

라이브러리를 사용하여 clsx 클래스 이름 전환

상태, 조건에 따라 요소에 조건부 스타일을 적용해야 하는 경우가 생긴다.

clsx은 클래스 이름을 쉽게 전환할 수 있는 라이브러리이다.

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

위 코드를 보면 status가 pending일 때 회색 글자색과 배경색을 지정하게하고, status가 paid일 때 초록색 배경과, 흰색 글자가 나오도록 지정했다.

이런식으로 조건에 따라 다르게 스타일을 지정하고 싶다면, clsx를 사용할 수 있다.

이 외에도 scss,styled-component 등 다양한 방법으로 스타일 지정이 가능하다.