Merge pull request #428 from pixiv/mimo/tailwind-config-spacing

tailwind-configのspacing docs追加

docs/src/components/NavList.tsx

@@ -99,6 +99,14 @@ const tailwindConfigList: ListItem[] = [
     text: 'カスタマイズする',
     href: '/@charcoal-ui/tailwind-config/customize',
   },
+  {
+    text: 'Typography',
+    href: '/@charcoal-ui/tailwind-config/typography',
+  },
+  {
+    text: 'Spacing',
+    href: '/@charcoal-ui/tailwind-config/spacing',
+  },
 ]
 
 const tailwindDiffList: ListItem[] = [
@@ -161,20 +169,6 @@ 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: 'Typography',
-    href: '/@charcoal-ui/tailwind-config/typography',
-  },
-]
 
 export const NavList: FC<{ className?: string }> = (props) => {
   const router = useRouter()

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>
+  )
+}

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