Add Tailwind config with Mission Control tokens and global styles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-24 16:51:37 +02:00
parent 902d48a80a
commit ec320f7ae4
3 changed files with 86 additions and 0 deletions
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,7 @@
+---
+import '../styles/global.css';
+---
+<html lang="en">
+  <head><meta charset="utf-8" /><title>scaffold</title></head>
+  <body class="bg-bg text-text"><p class="text-accent font-mono">scaffold ok</p></body>
+</html>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,33 @@
+@import '@fontsource/dm-sans/400.css';
+@import '@fontsource/dm-sans/500.css';
+@import '@fontsource/dm-sans/700.css';
+@import '@fontsource/jetbrains-mono/400.css';
+@import '@fontsource/jetbrains-mono/700.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    color-scheme: dark;
+  }
+  html {
+    @apply bg-bg text-text font-sans;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+  body {
+    @apply min-h-screen;
+  }
+  code, kbd, samp, pre {
+    @apply font-mono;
+  }
+  ::selection {
+    @apply bg-accent text-bg;
+  }
+  :focus-visible {
+    @apply outline-2 outline-offset-2 outline-accent;
+  }
+}
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -0,0 +1,46 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  theme: {
+    extend: {
+      colors: {
+        bg: {
+          DEFAULT: '#060a13',
+          elevated: '#0c111a',
+        },
+        border: {
+          DEFAULT: '#1e2535',
+          strong: '#2a3242',
+        },
+        accent: {
+          DEFAULT: '#f0b429',
+          muted: '#c89321',
+        },
+        cyan: {
+          DEFAULT: '#5cc8ff',
+          muted: '#3a9dd1',
+        },
+        rose: '#f43f5e',
+        green: '#10b981',
+        text: {
+          DEFAULT: '#e8eaed',
+          muted: '#9aa3b2',
+          faint: '#6b7280',
+        },
+      },
+      fontFamily: {
+        sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
+        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+      },
+      fontSize: {
+        'display': ['clamp(2.5rem, 5vw, 4.5rem)', { lineHeight: '1.05', letterSpacing: '-0.02em' }],
+        'hero': ['clamp(1.75rem, 3vw, 2.75rem)', { lineHeight: '1.15', letterSpacing: '-0.015em' }],
+      },
+      maxWidth: {
+        content: '72rem',
+        prose: '42rem',
+      },
+    },
+  },
+  plugins: [],
+};