Add tailwind support.

astro.config.mjs

@@ -1,43 +1,54 @@
-import starlight from '@astrojs/starlight';
-import { defineConfig } from 'astro/config';
-import blog from 'starlight-blog';
+import starlight from '@astrojs/starlight'
+import { defineConfig } from 'astro/config'
+import blog from 'starlight-blog'
+
+import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [
 		blog({
 			authors: {
 				alex: {
-				  name: 'Alex Kontos',
-				  title: 'Founder',
-				  picture: '/alex.jpg', // Images in the `public` directory are supported.
-				  url: 'https://uk.linkedin.com/in/alex-kontos',
-				},
+					name: 'Alex Kontos',
+					title: 'Founder',
+					picture: '/alex.jpg',
+					url: 'https://www.linkedin.com/in/alex-kontos'
+				}
 			}
 		}),
 		starlight({
 			components: {
 				MarkdownContent: 'starlight-blog/overrides/MarkdownContent.astro',
 				Sidebar: 'starlight-blog/overrides/Sidebar.astro',
-				ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro',
+				ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro'
 			},
+			customCss: ['./src/assets/global.scss'],
 			title: 'My Docs',
 			social: {
-				github: 'https://github.com/withastro/starlight',
+				github: 'https://github.com/withastro/starlight'
 			},
 			sidebar: [
 				{
 					label: 'Guides',
 					items: [
 						// Each item here is one entry in the navigation menu.
-						{ label: 'Example Guide', link: '/guides/example/' },
-					],
+						{
+							label: 'Example Guide',
+							link: '/guides/example/'
+						}
+					]
 				},
 				{
 					label: 'Reference',
-					autogenerate: { directory: 'reference' },
-				},
-			],
+					autogenerate: {
+						directory: 'reference'
+					}
+				}
+			]
 		}),
-	],
-});
+		tailwind({
+			applyBaseStyles: false
+		})
+	]
+})

package.json

@@ -11,9 +11,12 @@
   },
   "dependencies": {
     "@astrojs/starlight": "^0.11.1",
+    "@astrojs/starlight-tailwind": "^2.0.0",
+    "@astrojs/tailwind": "^5.0.2",
     "astro": "^3.2.3",
     "sharp": "^0.32.5",
-    "starlight-blog": "^0.4.0"
+    "starlight-blog": "^0.4.0",
+    "tailwindcss": "^3.0.24"
   },
   "devDependencies": {
     "prettier": "^3.0.3",

src/assets/global.scss

@@ -0,0 +1,190 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html, body {
+        @apply w-full;
+    }
+
+    @keyframes wobble {
+        33% {
+            transform: translateX(-50px);
+        }
+
+        66% {
+            transform: translateX(50px);
+        }
+    }
+
+    @keyframes up {
+        0% {
+            opacity: 0;
+        }
+
+        10%,
+        90% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 0;
+            transform: translateY(-1024px);
+        }
+    }
+
+    .message {
+        @apply px-4 py-0.5 rounded-xl border-l-8;
+
+        &.message-note {
+            @apply bg-azure/10 border-azure;
+        }
+        &.message-tip {
+            @apply bg-turquoise/10 border-turquoise;
+        }
+        &.message-caution {
+            @apply bg-gold/10 border-gold;
+        }
+        &.message-danger {
+            @apply bg-red-400/10 border-red-400;
+        }
+    }
+
+    .markdown {
+        @apply prose font-body font-light prose-deepsea flex max-w-[72ch] flex-col prose-h2:mt-[1.8em] prose-h2:mb-[0.7em] prose-h2:text-2xl lg:prose-h2:text-3xl prose-h3:text-xl lg:prose-h3:text-2xl prose-hr:border-mist prose-hr:border-t-2 prose-headings:font-montserrat prose-pre:rounded-2xl;
+
+        & :not(pre) > code {
+            @apply rounded-md bg-frost/20 px-2 py-1 font-normal border-[1px] border-indigo/80 before:hidden after:hidden lg:whitespace-nowrap;
+        }
+    }
+
+    .sticky-nav {
+        @media screen and ( min-height: 800px ) {
+            @apply sticky;
+        }
+    }
+}
+
+@layer utilities {
+    .text-balance {
+        text-wrap: balance;
+    }
+    .text-pretty {
+        text-wrap: pretty;
+    }
+}
+
+// algolia
+.aa-Autocomplete {
+    @apply w-[18rem] rounded-full overflow-hidden border-0 bg-white shadow-md  transition-all hover:shadow-lg max-lg:hidden;
+
+    .aa-DetachedSearchButton {
+        @apply border-0 p-2;
+
+        &:focus {
+            @apply shadow-none;
+        }
+    }
+
+    .aa-DetachedSearchButtonPlaceholder {
+        @apply text-base text-deepsea;
+    }
+
+    .aa-SubmitIcon {
+        @apply text-deepsea;
+    }
+}
+.aa-InputWrapperPrefix {
+    @apply justify-center;
+}
+.aa-Detached {
+    @apply overflow-auto;
+}
+.aa-DetachedOverlay {
+    .aa-DetachedContainer {
+        @apply rounded-3xl overflow-hidden shadow-2xl bg-white max-xl:top-24;
+
+        .aa-DetachedFormContainer {
+            @apply border-0 py-3;
+
+            .aa-Form {
+                @apply rounded-full bg-white shadow-md transition-all hover:shadow-lg border-[1px] border-deepsea/10;
+
+                &:focus-within {
+                    @apply outline-none border-indigo;
+                }
+
+                .aa-Input {
+                    @apply text-deepsea;
+                }
+
+                .aa-SubmitButton {
+                    @apply flex justify-center items-center;
+
+                    .aa-SubmitIcon {
+                        @apply text-deepsea;
+                    }
+                }
+            }
+            .aa-DetachedCancelButton {
+                @apply hidden;
+            }
+        }
+
+        .aa-Panel {
+            @apply bg-transparent;
+
+            .aa-GradientBottom {
+                @apply bg-none;
+            }
+
+            .aa-List {
+                @apply flex flex-col gap-2;
+
+                .aa-Item {
+                    @apply text-deepsea bg-crystal/60 rounded-xl;
+
+                    .aa-ItemWrapper {
+                        @apply flex items-center gap-2 px-2 py-4;
+
+                        .aa-ItemContent {
+                            @apply flex grow items-center gap-2;
+
+                            .aa-ItemIcon {
+                                @apply shadow-none bg-transparent border-none text-deepsea bg-opacity-100;
+                            }
+
+                            .aa-ItemContentTitle {
+                                @apply text-inherit font-medium text-base;
+
+                                mark {
+                                    @apply bg-azure text-white;
+                                }
+                            }
+
+                            .aa-ItemContentDescription {
+                                @apply text-inherit text-sm;
+
+                                mark {
+                                    @apply bg-azure text-white;
+                                }
+                            }
+                        }
+
+                        .aa-ItemActionButton svg {
+                            @apply text-white;
+                        }
+                    }
+
+                    &[aria-selected=true] {
+                        @apply bg-deepblue/90 text-white;
+
+                        .aa-ItemWrapper .aa-ItemIcon {
+                            @apply text-white;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

tailwind.config.cjs

@@ -1,13 +1,15 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const starlightPlugin = require('@astrojs/starlight-tailwind')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	plugins: [starlightPlugin()],
 	theme: {
 		extend: {
 			fontFamily: {
 				body: [...defaultTheme.fontFamily.sans],
-				montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans],
+				montserrat: ['Montserrat', ...defaultTheme.fontFamily.sans]
 			},
 			colors: {
 				deepsea: '#053361',
@@ -62,6 +64,5 @@ module.exports = {
 				}
 			})
 		}
-	},
-	plugins: [require('@tailwindcss/typography')]
+	}
 }