Add custom base style of Tailwind

astro.config.mjs

@@ -1,8 +1,12 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+  integrations: [
+    tailwind({
+      config: { applyBaseStyles: false },
+    }),
+  ],
 });

src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import "../styles/base.css";
+
 export interface Props {
   title: string;
 }

src/styles/base.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn-blue {
+    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+  }
+}