Setup tailwind

Use this comment to add a custom docusaurus plugin
https://github.com/facebook/docusaurus/issues/2961#issuecomment-735355912

docs/docusaurus.config.js

@@ -1,6 +1,6 @@
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
-  title: 'My Site',
+  title: 'CadHub',
   tagline: 'Pushing the advent of CodeCad',
   url: 'https://your-docusaurus-test-site.com',
   baseUrl: '/',
@@ -9,7 +9,7 @@ module.exports = {
   favicon: 'img/favicon.ico',
   organizationName: 'IrevDev', // Usually your GitHub org/user name.
   projectName: 'Cadhub', // Usually your repo name.
-  plugins: ['@docusaurus/plugin-ideal-image'],
+  plugins: ['@docusaurus/plugin-ideal-image', 'docusaurus-tailwindcss-loader'],
   themeConfig: {
     navbar: {
       title: 'My Site',

docs/package.json

@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "2.0.0-alpha.72",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
+    "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
@@ -33,5 +34,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
+    "postcss-import": "^14.0.1",
+    "tailwindcss": "^2.1.2"
   }
 }

docs/plugins/docusaurus-tailwindcss-loader/index.js

@@ -0,0 +1,19 @@
+// See this GH comment, https://github.com/facebook/docusaurus/issues/2961#issuecomment-735355912
+module.exports = function (context, options) {
+  return {
+    name: 'postcss-tailwindcss-loader',
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins.push(
+        require('postcss-import'),
+        require('tailwindcss'),
+        require('postcss-preset-env')({
+          autoprefixer: {
+            flexbox: 'no-2009',
+          },
+          stage: 4,
+        })
+      )
+      return postcssOptions
+    },
+  }
+}

docs/src/css/custom.css

@@ -5,14 +5,49 @@
  * work well for content-centric websites.
  */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap');
+
+/* h1 {
+  font-size: 56px;
+} */
+
+@layer base {
+  h1 {
+    @apply text-4xl font-bold
+  }
+  h2 {
+    @apply text-3xl font-bold
+  }
+  h3 {
+    @apply text-2xl font-bold
+  }
+
+  ul li {
+    @apply list-disc ml-4
+  }
+
+  .table-of-contents li {
+    @apply list-none
+  }
+
+  a {
+    @apply text-indigo-700
+  }
+}
+
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary: rgb(79, 70, 229);
+  --ifm-color-primary-dark: rgb(67, 56, 202);
+  --ifm-color-primary-darker: rgb(55, 48, 163);
+  --ifm-color-primary-darkest: rgb(49, 46, 129);
+  --ifm-color-primary-light: rgb(99, 102, 241);
+  --ifm-color-primary-lighter: rgb(129, 140, 248);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
 }

docs/tailwind.config.js

@@ -0,0 +1,2 @@
+const webConfig = require('../web/tailwind.config.js')
+module.exports = webConfig