fix: setup tailwind for blogs (#39)

blog/astro.config.mjs

@@ -2,57 +2,58 @@ import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import starlightBlog from 'starlight-blog';
 
+import tailwind from "@astrojs/tailwind";
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://opensaas.sh',
-  integrations: [
-    starlightBlog({
-      title: 'Blog',
-      authors: {
-        vince: {
-          name: 'Vince',
-          title: 'Dev Rel @ Wasp',
-          picture: '/CRAIG_ROCK.png', // Images in the `public` directory are supported.
-          url: 'https://wasp-lang.dev',
-        },
-      },
-    }),
-    starlight({
-      title: 'Your SaaS', 
-      description: 'Documentation for your SaaS.',
-      logo: {
-        src: '/src/assets/logo.png',
-        alt: 'Your SaaS',
-      },
-      editLink: {
-        baseUrl: 'https://github.com/<your-repo>',
-      },
-      components: {
-        SiteTitle: './src/components/MyHeader.astro',
-        MarkdownContent: 'starlight-blog/overrides/MarkdownContent.astro',
-        Sidebar: 'starlight-blog/overrides/Sidebar.astro',
-        // ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro',
-      },
-      social: {
-        github: 'https://github.com/wasp-lang/open-saas',
-        twitter: 'https://twitter.com/wasp_lang',
-        discord: 'https://discord.gg/aCamt5wCpS',
-      },
-      sidebar: [
-        {
-          label: 'Start Here',
-          items: [
-            { label: 'Introduction', link: '/' },
-          ],
-        },
-        {
-          label: 'Guides',
-          items: [
-            { label: 'Example Guide', link: '/guides/example/' },
+  integrations: [starlightBlog({
+    title: 'Blog',
+    customCss: ['./src/styles/tailwind.css'],
+    authors: {
+      vince: {
+        name: 'Vince',
+        title: 'Dev Rel @ Wasp',
+        picture: '/CRAIG_ROCK.png',
+        // Images in the `public` directory are supported.
+        url: 'https://wasp-lang.dev'
+      }
+    }
+  }), starlight({
+    title: 'Your SaaS',
+    customCss: ['./src/styles/tailwind.css'],
+    description: 'Documentation for your SaaS.',
+    logo: {
+      src: '/src/assets/logo.png',
+      alt: 'Your SaaS'
+    },
+    editLink: {
+      baseUrl: 'https://github.com/<your-repo>'
+    },
+    components: {
+      SiteTitle: './src/components/MyHeader.astro',
+      MarkdownContent: 'starlight-blog/overrides/MarkdownContent.astro',
+      Sidebar: 'starlight-blog/overrides/Sidebar.astro'
+      // ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro',
+    },
 
-          ],
-        },
-      ],
-    }),
-  ],
-});
+    social: {
+      github: 'https://github.com/wasp-lang/open-saas',
+      twitter: 'https://twitter.com/wasp_lang',
+      discord: 'https://discord.gg/aCamt5wCpS'
+    },
+    sidebar: [{
+      label: 'Start Here',
+      items: [{
+        label: 'Introduction',
+        link: '/'
+      }]
+    }, {
+      label: 'Guides',
+      items: [{
+        label: 'Example Guide',
+        link: '/guides/example/'
+      }]
+    }]
+  }), tailwind({applyBaseStyles: false})]
+});

blog/package.json

@@ -12,9 +12,12 @@
   "dependencies": {
     "@astrojs/check": "^0.3.1",
     "@astrojs/starlight": "^0.13.0",
+    "@astrojs/starlight-tailwind": "^2.0.1",
+    "@astrojs/tailwind": "^5.1.0",
     "astro": "^3.2.3",
     "sharp": "^0.32.5",
     "starlight-blog": "^0.4.0",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.2"
   }
 }

blog/src/components/MyHeader.astro

@@ -30,15 +30,15 @@ const href = Astro.site
 			</>
 		)
 	}
-	<span class:list={{ 'sr-only': config.logo?.replacesTitle }}>
+	<span class:list={{ 'sr-only': config.logo?.replacesTitle }} class="dark:text-white hover:text-yellow-500">
 		{config.title}
 	</span>
 </a>
 <div>
-  <a href="/">Docs</a>
+  <a href="/" class="text-gray-900 hover:text-yellow-500 dark:text-white">Docs</a>
 </div>
 <div>
-  <a href="/blog">{blogConfig.title}</a>
+  <a href="/blog" class="text-gray-900 hover:text-yellow-500 dark:text-white">{blogConfig.title}</a>
 </div>
 
 <style>
@@ -47,10 +47,10 @@ const href = Astro.site
 		max-width: 100%;
 		overflow: hidden;
 		align-items: center;
+		color: var(--sl-color-gray-9);
 		gap: var(--sl-nav-gap);
 		font-size: var(--sl-text-h4);
 		font-weight: 600;
-		color: var(--sl-color-text-accent);
 		text-decoration: none;
 		white-space: nowrap;
     padding-inline-end: 1rem;

blog/src/styles/tailwind.css

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

blog/tailwind.config.mjs

@@ -0,0 +1,18 @@
+import starlightPlugin from "@astrojs/starlight-tailwind";
+import colors from "tailwindcss/colors";
+
+const yellow = colors.yellow
+const gray = colors.gray
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        accent: yellow, gray
+      },
+    },
+  },
+  plugins: [starlightPlugin()],
+};