`className="sticky top-0 z-50"`で固定する。

```js
import Header from '@/components/organisms/header.js'

export default function Layout({ children }) {
  return (
    <>
      {/* ヘッダーを固定する */}
      <div className="sticky top-0 z-50">
        <Header />
      </div>
      {/* メインコンテンツ */}
      <div>{children}</div>
    </>
  )
}
```

TailwindCSS

TailwindCSSでHeaderを固定する

[Font Size](https://tailwindcss.com/docs/font-size)

## 設定

`tailwind.config.js`

```js
module.exports = {
  theme: {
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem', 
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      'mobile-input': '16px', // 追記
    },
  }
}
```

1つ定義すると、それしか見なくなるようなので、全部定義した。
lineHeightもやった方がいいかも。。

## 使い方

```sass
sm:text-lg text-mobile-input
```


TailwindCSSでmobileのinput系を16pxにする

## リソース一覧
- [Tailwind CSS](https://tailwindcss.com/)
- [Resources - Tailwind CSS](https://tailwindcss.com/resources)
- [Tailwind UI](https://tailwindui.com/)
- [Tailwind Components](https://tailwindcomponents.com/)
- [Tailwind Templates](https://tailwindtemplates.io/)
- [Tailwind Page Creater | DevDojo](https://devdojo.com/tails/app)
- [Tailwind UI Kit](https://tailwinduikit.com/)

## Breakpointの設定
- [Breakpoints](https://tailwindcss.com/docs/breakpoints)