feat: add tailwindcss to docs/

docs/package.json

@@ -26,8 +26,11 @@
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
     "@types/styled-components": "^5.1.26",
+    "autoprefixer": "^10.4.16",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
     "typescript": "^5.0.4"
   },
   "resolutions": {

docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

docs/src/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

docs/src/pages/_app.page.tsx

@@ -12,6 +12,7 @@ import { theme } from '../utils/theme'
 import { AppProvider } from '../components/AppProvider'
 import { SideMenuDiv } from '../components/SideMenuDiv'
 import Head from 'next/head'
+import '../global.css'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

docs/tailwind.config.js

@@ -0,0 +1,17 @@
+const { light, dark } = require('@charcoal-ui/theme')
+const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/pages/**/*.tsx', './src/components/**/*.tsx'],
+  presets: [
+    createTailwindConfig({
+      version: 'v3',
+      theme: {
+        ':root': light,
+        '[data-theme="dark"]': dark,
+      },
+    }),
+  ],
+  safelist: [{ pattern: /.*/ }],
+}