docs(style): use Tailwind to customize the docs colors

docs/astro.config.mjs

@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
+import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
@@ -7,6 +8,7 @@ export default defineConfig({
     starlight({
       title: 'Emigrate',
       favicon: '/favicon.ico',
+      customCss: ['./src/tailwind.css'],
       head: [
         {
           tag: 'link',
@@ -102,36 +104,70 @@ export default defineConfig({
               label: 'Storage Plugins',
               collapsed: true,
               items: [
-                { label: 'Introduction', link: '/plugins/storage/' },
-                { label: 'File System', link: '/plugins/storage/file-system/' },
-                { label: 'MySQL', link: '/plugins/storage/mysql/' },
+                {
+                  label: 'Introduction',
+                  link: '/plugins/storage/',
+                },
+                {
+                  label: 'File System',
+                  link: '/plugins/storage/file-system/',
+                },
+                {
+                  label: 'MySQL',
+                  link: '/plugins/storage/mysql/',
+                },
               ],
             },
             {
               label: 'Loader Plugins',
               collapsed: true,
               items: [
-                { label: 'Introduction', link: '/plugins/loaders/' },
-                { label: 'Default Loader', link: '/plugins/loaders/default/' },
-                { label: 'MySQL Loader', link: '/plugins/loaders/mysql/' },
+                {
+                  label: 'Introduction',
+                  link: '/plugins/loaders/',
+                },
+                {
+                  label: 'Default Loader',
+                  link: '/plugins/loaders/default/',
+                },
+                {
+                  label: 'MySQL Loader',
+                  link: '/plugins/loaders/mysql/',
+                },
               ],
             },
             {
               label: 'Reporters',
               collapsed: true,
               items: [
-                { label: 'Introduction', link: '/plugins/reporters/' },
-                { label: 'Default Reporter', link: '/plugins/reporters/default/', badge: 'WIP' },
-                { label: 'Pino Reporter', link: '/plugins/reporters/pino/', badge: 'WIP' },
+                {
+                  label: 'Introduction',
+                  link: '/plugins/reporters/',
+                },
+                {
+                  label: 'Default Reporter',
+                  link: '/plugins/reporters/default/',
+                  badge: 'WIP',
+                },
+                {
+                  label: 'Pino Reporter',
+                  link: '/plugins/reporters/pino/',
+                  badge: 'WIP',
+                },
               ],
             },
           ],
         },
         {
           label: 'Reference',
-          autogenerate: { directory: 'reference' },
+          autogenerate: {
+            directory: 'reference',
+          },
         },
       ],
     }),
+    tailwind({
+      applyBaseStyles: false,
+    }),
   ],
 });

docs/package.json

@@ -15,7 +15,10 @@
   },
   "dependencies": {
     "@astrojs/starlight": "^0.15.0",
+    "@astrojs/starlight-tailwind": "2.0.1",
+    "@astrojs/tailwind": "^5.0.3",
     "astro": "^4.0.1",
-    "sharp": "^0.32.5"
+    "sharp": "^0.32.5",
+    "tailwindcss": "^3.3.6"
   }
 }

docs/src/tailwind.css

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

docs/tailwind.config.mjs

@@ -0,0 +1,17 @@
+import starlightPlugin from '@astrojs/starlight-tailwind';
+import colors from 'tailwindcss/colors';
+
+/** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  theme: {
+    extend: {
+      colors: {
+        accent: colors.orange,
+        gray: colors.slate,
+      },
+    },
+  },
+  plugins: [starlightPlugin()],
+};