diff --git a/docs/src/components/NavList.tsx b/docs/src/components/NavList.tsx
index e78de0ee1..47607cdf4 100644
--- a/docs/src/components/NavList.tsx
+++ b/docs/src/components/NavList.tsx
@@ -104,6 +104,17 @@ const tailwindDiffList: ListItem[] = [
   },
 ]
 
+const tailwindConfigList: ListItem[] = [
+  {
+    text: 'クイックスタート',
+    href: '/@charcoal-ui/tailwind-config/quickstart'
+  },
+  {
+    text: 'カスタマイズする',
+    href: '/@charcoal-ui/tailwind-config/customize'
+  }
+]
+
 export const NavList: FC<{ className?: string }> = (props) => {
   const router = useRouter()
   useEffect(() => {
@@ -138,6 +149,9 @@ export const NavList: FC<{ className?: string }> = (props) => {
       <ListItemHeader>@charcoal-ui/tailwind-diff</ListItemHeader>
       {tailwindDiffList.map(renderListItem)}
       <ListItemHeader>Links</ListItemHeader>
+      <ListItemHeader>@charcoal-ui/tailwind-config</ListItemHeader>
+      {tailwindConfigList.map(renderListItem)}
+      <ListItemHeader>Links</ListItemHeader>
       <ExternalLink href="https://github.com/pixiv/charcoal" text="GitHub" />
       <ExternalLink href="https://pixiv.github.io/charcoal/" text="Storybook" />
       <div
diff --git a/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx b/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx
new file mode 100644
index 000000000..2386ec465
--- /dev/null
+++ b/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx
@@ -0,0 +1,137 @@
+import { ContentRoot } from "../../../components/ContentRoot";
+import { InlineCode } from "../../../components/InlineCode";
+import { SSRHighlight } from "../../../components/SSRHighlight";
+import { Table } from "../../../components/Table";
+import { dedent } from "../../../utils/string";
+
+export default function CustomizeTailwindConfig() {
+    return (<ContentRoot>
+        <h1>カスタマイズする</h1>
+        <p>
+            <InlineCode>createTailwindConfig()</InlineCode> を利用することでお使いの環境、色などに適応させることができます。
+        </p>
+
+        <SSRHighlight code={dedent`
+            const { light, dark } = require('@charcoal-ui/theme')
+            const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
+            
+            /**
+             * @type {import('tailwindcss/tailwind-config').TailwindConfig}
+                */
+            module.exports = {
+                darkMode: false,
+                content: ['./src/**/*.tsx', './src/**/*.html'],
+                presets: [
+                createTailwindConfig({
+                    version: 'v3',
+                    theme: {
+                    ':root': light,
+                    '@media (prefers-color-scheme: dark)': dark,
+                    },
+                }),
+                ],
+            }
+        `} lang="javascript" />
+        <p>
+            <InlineCode>createTailwindConfig</InlineCode> には以下のオプションを渡すことができます。
+        </p>
+        <Table data={options} />
+
+        <h2>ThemaMap について</h2>
+        <p>
+            charcoal は Tailwind.css の通常のダークモード（ <InlineCode>dark:〇〇</InlineCode> 系のクラス ）をサポートしません。<br />
+            なぜなら charcoal における「色」は、同じ名前でも light テーマと dark テーマで違うカラーコードであり得るからです。<br />
+            これを表現するために <InlineCode>@charcoal-ui/tailwind-config</InlineCode> では <InlineCode>theme</InlineCode> というオプションを受け取ります。<br />
+        </p>
+        <p>
+            以下の例は <InlineCode>:root</InlineCode>（つまり通常ケース）では light テーマを、システムの設定がダークモードである場合は dark テーマを使用するものです。 <br />
+        </p>
+        <SSRHighlight code={dedent`
+            createTailwindConfig({
+                version: 'v3',
+                theme: {
+                    ':root': light,
+                    '@media (prefers-color-scheme: dark)': dark,
+                },
+            })
+            `} lang="javascript" />
+        <p>
+            <InlineCode>theme</InlineCode> オプションを設定する場合、ダークテーマ対応を行わないサービスであっても  <InlineCode>:root</InlineCode> に必ず自身のプロダクトのカラーテーマを渡す必要があります。
+        </p>
+        <p>
+            <InlineCode>theme</InlineCode> をこのように書くと、 このような CSS Variables を生成します。
+        </p>
+        <SSRHighlight lang="css" code={dedent`
+            /* 以下はイメージです */
+
+            :root {
+              --tailwind-color-background1: #fff;
+              --tailwind-color-background2: #f5f5f5;
+              /* ... */
+            }
+            
+            @media (prefers-color-scheme: dark) {
+              :root {
+                --tailwind-color-background1: #1f1f1f;
+                --tailwind-color-background2: #000000;
+                /* ... */
+              }
+            }
+        `} />
+        <p>
+            このとき、以下のように書く必要はありません。<br />
+            キーが <InlineCode>@media</InlineCode> で始まる場合はビルド時に <InlineCode>:root</InlineCode> が補われます。
+        </p>
+        <SSRHighlight lang="javascript" code={dedent`
+                {
+                    theme: {
+                        // これは間違い！！
+                        '@media (prefers-color-scheme: dark)': {
+                            ':root': dark
+                        },
+                
+                        // 正しくはこう
+                        '@media (prefers-color-scheme: dark)': dark
+                    }
+                }
+            `} />
+        <p>
+            <InlineCode>theme</InlineCode> のキーとして通常のセレクタを指定することもできます。<br />
+            これによりダークモードの切り替えがDOMの状態に依存するケースにも対応します。 <InlineCode>localStorage</InlineCode> などで JS での切り替えを実装しているアプリケーションはこのような手法が好ましいでしょう。
+        </p>
+        <SSRHighlight lang="javascript" code={dedent`
+            createTailwindConfig({
+                version: 'v3',
+                theme: {
+                    ':root': light,
+                    'html[data-theme="dark"]': dark,
+                },
+            })
+        `} />
+        <SSRHighlight lang="css" code={dedent`
+            /* 以下はイメージです */
+
+            :root {
+              --tailwind-color-background1: #fff;
+              --tailwind-color-background2: #f5f5f5;
+              /* ... */
+            }
+            
+            html[data-theme='dark'] {
+              --tailwind-color-background1: #1f1f1f;
+              --tailwind-color-background2: #000000;
+              /* ... */
+            }
+        `} />
+    </ContentRoot>)
+}
+const options = {
+    version: {
+        type: 'v1 | v2 | v3',
+        description: 'Tailwind.cssのバージョン系統を指定します。色のキー名に使われる DEFAULT と default などの違いを内部で吸収します。'
+    },
+    theme: {
+        type: 'Record<string, Theme>',
+        description: '条件ごとの色の値のマッピングを渡します。 :root は必須のキーです。'
+    }
+}
\ No newline at end of file
diff --git a/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx b/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx
new file mode 100644
index 000000000..0d4574a02
--- /dev/null
+++ b/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx
@@ -0,0 +1,64 @@
+import Link from "next/link";
+import { ContentRoot } from "../../../components/ContentRoot";
+import { SSRHighlight } from "../../../components/SSRHighlight";
+import { dedent } from "../../../utils/string";
+import { InlineCode } from "../../../components/InlineCode";
+
+export default function InstallPage() {
+    return (
+        <ContentRoot>
+            <h1>@charcoal-ui/tailwind-config クイックスタート</h1>
+            <Link href="https://www.npmjs.com/package/@charcoal-ui/tailwind-config">
+                <img
+                    alt="npm-badge"
+                    src="https://img.shields.io/npm/v/@charcoal-ui/tailwind-config?label=%40charcoal-ui%2Ftailwind-config&style=flat-square&logo=npm"
+                />
+            </Link>
+            <h2>インストール</h2>
+            <h3>npm</h3>
+            <SSRHighlight
+                code={dedent`
+                    npm install --save-dev @charcoal-ui/tailwind-config
+                `}
+                lang="shell"
+            />
+            <h3>yarn</h3>
+            <SSRHighlight
+                code={dedent`
+                    yarn add -D @charcoal-ui/tailwind-config
+                `}
+                lang="shell"
+            />
+
+            <hr />
+
+            <h2>概要</h2>
+            <p>
+                <InlineCode>@charcoal-ui/tailwind-config</InlineCode>は、Tailwindに<InlineCode>@charcoal-ui/foundation</InlineCode>を適用します。
+            </p>
+
+            <h2>使い方</h2>
+            <p>
+                tailwind.config.js の中で <InlineCode>require</InlineCode> して使います。
+            </p>
+
+            <h3>デフォルトのconfigを使う</h3>
+            <SSRHighlight code={dedent`
+                const { config } = require('@charcoal-ui/tailwind-config')
+                
+                /** @type {import('tailwindcss').Config} */
+                module.exports = {
+                    content: [],
+                    theme: {
+                        extend: {},
+                    },
+                    plugins: [],
+                    presets: [config]
+                }
+                `} lang="javascript" />
+            <p>
+                テーマの調整などが必要な場合は <Link href="/@charcoal-ui/tailwind-config/customize">カスタマイズする</Link> のページを見てください。
+            </p>
+        </ContentRoot>
+    )
+}
\ No newline at end of file
diff --git a/docs/yarn.lock b/docs/yarn.lock
index e83af43ce..c62fb2513 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -162,38 +162,38 @@ __metadata:
   linkType: hard
 
 "@charcoal-ui/foundation@file:../packages/foundation::locator=charcoal-web-docs%40workspace%3A.":
-  version: 2.7.0
-  resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=d957c7&locator=charcoal-web-docs%40workspace%3A."
-  checksum: 9fd3113ff75a72f850d28cccf9874385243506ef440075713eadc074a0feb3a176d310a9ea66d94029c57e8e636453c71043b2748c4d5185537bafd10507071d
+  version: 2.9.0
+  resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=58ee21&locator=charcoal-web-docs%40workspace%3A."
+  checksum: 075289f805047b438598a03447981faa445c7f85411428cbaebd8e03029555ddd263953f4de73d0a4f0a7d77b4051f6c0fcab88b1f37d39d787880b07f92f4a1
   languageName: node
   linkType: hard
 
 "@charcoal-ui/icon-files@file:../packages/icon-files::locator=charcoal-web-docs%40workspace%3A.":
-  version: 2.7.0
-  resolution: "@charcoal-ui/icon-files@file:../packages/icon-files#../packages/icon-files::hash=046264&locator=charcoal-web-docs%40workspace%3A."
-  checksum: 7ae635a3556fc815ed165f782fbdb48485babbcf94e8bce9ab89b635f961143a38716225aa99428649be0e0478f1df6384939df21c8701c52e6f280522e47d4d
+  version: 2.9.0
+  resolution: "@charcoal-ui/icon-files@file:../packages/icon-files#../packages/icon-files::hash=79e532&locator=charcoal-web-docs%40workspace%3A."
+  checksum: 6f77d4cedc2a60744e2a2c1db261ee00e1c622355462b5bffa219ff1a2280b0c7616b4d8a5c58d705b8d286e5ed5f01e2182ec8a7b064ffe963cf2d4b273fba3
   languageName: node
   linkType: hard
 
 "@charcoal-ui/icons@file:../packages/icons::locator=charcoal-web-docs%40workspace%3A.":
-  version: 2.7.0
-  resolution: "@charcoal-ui/icons@file:../packages/icons#../packages/icons::hash=4c3a94&locator=charcoal-web-docs%40workspace%3A."
+  version: 2.9.0
+  resolution: "@charcoal-ui/icons@file:../packages/icons#../packages/icons::hash=4ad6a7&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/icon-files": ^2.7.0
+    "@charcoal-ui/icon-files": ^2.9.0
     dompurify: ^2.3.6
     warning: ^4.0.3
-  checksum: cce419122636c5ab2683714f5c8f1d05756771d2fbaedc8a94e14f4f4dd9b1d409541142ba7afef8add61670b4955eae7bbb53231a3114ec7179d8cac107d8cd
+  checksum: b90af93a63614dd45ce31658cdbf3bb41137b30573b4204c54075e2c77383ee4533dbd66e67b358b09ab0701f0746bda99618f58b759baf817cb55b00706a911
   languageName: node
   linkType: hard
 
 "@charcoal-ui/react@file:../packages/react::locator=charcoal-web-docs%40workspace%3A.":
-  version: 2.7.0
-  resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=4e474c&locator=charcoal-web-docs%40workspace%3A."
+  version: 2.9.0
+  resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=19379f&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/icons": ^2.7.0
-    "@charcoal-ui/styled": ^2.7.0
-    "@charcoal-ui/theme": ^2.7.0
-    "@charcoal-ui/utils": ^2.7.0
+    "@charcoal-ui/icons": ^2.9.0
+    "@charcoal-ui/styled": ^2.9.0
+    "@charcoal-ui/theme": ^2.9.0
+    "@charcoal-ui/utils": ^2.9.0
     "@react-aria/button": ^3.7.0
     "@react-aria/checkbox": ^3.8.0
     "@react-aria/dialog": ^3.5.0
@@ -215,43 +215,43 @@ __metadata:
   peerDependencies:
     react: ">=16.13.1"
     styled-components: ">=5.1.1"
-  checksum: 0691454c966c4e8f59361b28e1b636f7699a7b3068ae7aa13a121c34ce45c9747739ac1a8793c96098ec29b99642d3b1a1f197695f9951cefe64727639d60fde
+  checksum: 5f0594655483447e39ca07f4fa39aed9f7d2ba5f844e128c6685086cea6128a7f8cd8ee290d377e009ae077a8ab41d85a0d26ec90b2d90ea7c7d36e087d2b8e4
   languageName: node
   linkType: hard
 
 "@charcoal-ui/styled@file:../packages/styled::locator=charcoal-web-docs%40workspace%3A.":
-  version: 2.7.0
-  resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=7176df&locator=charcoal-web-docs%40workspace%3A."
+  version: 2.9.0
+  resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=d7d6c5&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/foundation": ^2.7.0
-    "@charcoal-ui/theme": ^2.7.0
-    "@charcoal-ui/utils": ^2.7.0
+    "@charcoal-ui/foundation": ^2.9.0
+    "@charcoal-ui/theme": ^2.9.0
+    "@charcoal-ui/utils": ^2.9.0
     warning: ^4.0.3
   peerDependencies:
     react: ">=16.13.1"
     styled-components: ">=5.1.1"
-  checksum: 03f48f51eacf726ea5679adf5f0d6284e5b50832efef95ea074b26e3a75bba68e4b1a85ab3eb46d345d83fa6c2f7b30b67256ce6135c7b6127fd70fea0504961
+  checksum: 0ac9534e4c39d377beb615cde81c1e5e983b52f930f93aabf172d8178b901c889f37b51364b2e9a1e4f6ee884775b1c7d95179a75d61df171394a8342d84953c
   languageName: node
   linkType: hard
 
 "@charcoal-ui/theme@file:../packages/theme::locator=charcoal-web-docs%40workspace%3A.":
-  version: 2.7.0
-  resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=5dfd90&locator=charcoal-web-docs%40workspace%3A."
+  version: 2.9.0
+  resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=495f56&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/foundation": ^2.7.0
-    "@charcoal-ui/utils": ^2.7.0
+    "@charcoal-ui/foundation": ^2.9.0
+    "@charcoal-ui/utils": ^2.9.0
     polished: ^4.1.4
-  checksum: 5c279ccfbc555651fcc7c485eebc15917573e8fb051176b269f25b76dd6abfb8c1d6aa9a1569762791de06420838c06ebc1d6690adadf99379cfb08e0b2b9bfa
+  checksum: 32754159ecdc4dd35c0c2934c68b7595500121e84486fbfc44fb96dde5fc5e9799610a191635679579fdc1d3cbb2da3db819a7486bf91a59acd472e6cb3f5d9a
   languageName: node
   linkType: hard
 
 "@charcoal-ui/utils@file:../packages/utils::locator=charcoal-web-docs%40workspace%3A.":
-  version: 2.7.0
-  resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=494bf5&locator=charcoal-web-docs%40workspace%3A."
+  version: 2.9.0
+  resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=4cc69c&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
-    "@charcoal-ui/foundation": ^2.7.0
+    "@charcoal-ui/foundation": ^2.9.0
     polished: ^4.1.4
-  checksum: 9e4b16d41a44d6e6e8163d6e830a6d2792b131b1c6bea0068ec0a2283587ac0819d97ff2d4d0c0925ddf941879271bd1db4d3739cd2036d6f00d0ebbed354d99
+  checksum: d606ced70ef34fe3b36204eb65c057aa05dc3175b43e9da48a6bc31111627f418d552e9dca55ed3e075b54c30664ce1b9e147824004da8b4a309de5d53a9036c
   languageName: node
   linkType: hard