diff --git a/docs/src/components/NavList.tsx b/docs/src/components/NavList.tsx
index 28f4eaa6d..05b97e47d 100644
--- a/docs/src/components/NavList.tsx
+++ b/docs/src/components/NavList.tsx
@@ -150,6 +150,20 @@ const themeList: ListItem[] = [
     href: '/@charcoal-ui/theme/colors',
   },
 ]
+const tailwindConfigList: ListItem[] = [
+  {
+    text: 'クイックスタート',
+    href: '/@charcoal-ui/tailwind-config/quickstart',
+  },
+  {
+    text: 'カスタマイズする',
+    href: '/@charcoal-ui/tailwind-config/customize',
+  },
+  {
+    text: 'Spacing',
+    href: '/@charcoal-ui/tailwind-config/spacing',
+  },
+]
 
 export const NavList: FC<{ className?: string }> = (props) => {
   const router = useRouter()
diff --git a/docs/src/components/tailwind-config/spacing/Spacing.tsx b/docs/src/components/tailwind-config/spacing/Spacing.tsx
new file mode 100644
index 000000000..29a17e3f3
--- /dev/null
+++ b/docs/src/components/tailwind-config/spacing/Spacing.tsx
@@ -0,0 +1,20 @@
+import { config } from '@charcoal-ui/tailwind-config'
+
+const {
+  theme: { spacing },
+} = config
+
+export const Spacing: React.FC = () => {
+  return (
+    <div className="space-y-40">
+      {Object.keys(spacing!!).map((space) => (
+        <div key={space}>
+          <h3 className="typography-16 my-8 text-text2">p-{space}</h3>
+          <div className={`bg-surface3 p-${space} w-[min-content]`}>
+            <div className="bg-brand h-40" style={{ width: '40px' }}></div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/docs/src/pages/@charcoal-ui/tailwind-config/spacing.page.tsx b/docs/src/pages/@charcoal-ui/tailwind-config/spacing.page.tsx
new file mode 100644
index 000000000..f709ad75d
--- /dev/null
+++ b/docs/src/pages/@charcoal-ui/tailwind-config/spacing.page.tsx
@@ -0,0 +1,9 @@
+import { NextPage } from 'next'
+import { Spacing } from '../../../components/tailwind-config/spacing/Spacing'
+
+const SpacingPage: NextPage = () => (
+  <div className="w-full m-16">
+    <Spacing />
+  </div>
+)
+export default SpacingPage