Merge pull request #429 from pixiv/mimo/tailwind-config-documents-scr…

…eens

tailwind-configのbreak points (screen) docs追加

docs/src/components/NavList.tsx

@@ -107,6 +107,10 @@ const tailwindConfigList: ListItem[] = [
     text: 'Spacing',
     href: '/@charcoal-ui/tailwind-config/spacing',
   },
+  {
+    text: 'Break points',
+    href: '/@charcoal-ui/tailwind-config/screens',
+  },
 ]
 
 const tailwindDiffList: ListItem[] = [

docs/src/components/tailwind-config/screens/Screens.tsx

@@ -0,0 +1,24 @@
+import { config } from '@charcoal-ui/tailwind-config'
+
+const {
+  theme: { screens },
+} = config
+
+export const Screens: React.FC = () => {
+  return (
+    <div className="space-y-40">
+      {Object.entries(screens!!).map(
+        ([screenName, value]) =>
+          typeof value === 'string' && (
+            <div key={screenName}>
+              <p className="typography-14 text-text2">{screenName}</p>
+              <div className="bg-surface4 h-64" style={{ width: value }}></div>
+              <p className="typography-12 text-text3">
+                @media (<span className="text-text2">min-width: {value}</span>)
+              </p>
+            </div>
+          )
+      )}
+    </div>
+  )
+}

docs/src/pages/@charcoal-ui/tailwind-config/screens.page.tsx

@@ -0,0 +1,9 @@
+import { NextPage } from 'next'
+import { Screens } from '../../../components/tailwind-config/screens/Screens'
+
+const ScreenPage: NextPage = () => (
+  <div className="w-full m-16">
+    <Screens />
+  </div>
+)
+export default ScreenPage