npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}", "./app/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          600: "#2563eb",
          700: "#1d4ed8"
        },
      },
    },
  },
}

export function PrimaryButton({ children }: { children: React.ReactNode }) {
  return (
    <button
      className="inline-flex items-center gap-2 rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-sm
                 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-600/40 active:translate-y-px"
    >
      {children}
    </button>
  );
}

@layer components {
  .card {
    @apply rounded-xl border border-white/10 bg-black/20 p-6 backdrop-blur;
  }
  .card-title {
    @apply text-lg font-semibold tracking-tight;
  }
}