open-index/open-npm huggingface dataset:
npm package: @imwebme/clay-stylesheet
Description: ## 설치
Latest version: 2.2.3

# @imwebme/clay-stylesheet

## 설치

```bash
npm install @imwebme/clay-stylesheet
yarn add @imwebme/clay-stylesheet
pnpm add @imwebme/clay-stylesheet
```

## 가이드

주요 렌더링 경로에 배치합니다.

> SPA 의 경우 -> index.tsx
> Next.js의 경우 (page dir) -> \_app.tsx
> Next.js의 경우 (app dir) -> app/layout.tsx

```ts
import "@imwebme/clay-stylesheet";
```

### 루트 엘리먼트(<html>) 초기화

clay 에서 제공하는 속성은 사용하기 전에 명시적인 초기화가 필요합니다.

페이지 루트 요소에 `data-clay-theme` 어트리뷰트를 지정합니다.

예시 (HTML, SPA react)

```html
<html lang="ko" data-clay-theme="light-only">
  <head>
    <meta name="color-scheme" content="light" />
  </head>

  <body>
    <!-- your script -->
  </body>
</html>
```

예시 (Nextjs > page dir)

```tsx
<Html lang="ko" data-clay-theme="light-only">
  <Head>
    <meta name="color-scheme" content="light" />
  </Head>

  <body>
    <Main />
    <NextScript />
  </body>
</Html>
```

예시 (Nextjs > app dir)

```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" data-clay-theme="light-only">
      <head>
        <meta name="color-scheme" content="light" />
      </head>

      <body>{children}</body>
    </html>
  );
}
```