yuzucchii.xyz/src/tailwind.css
2025-05-08 23:25:20 -05:00

73 lines
1.4 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "@tailwindcss/typography";
@config "../tailwind.config.js";
/* Base typography improvements */
@layer base {
body {
@apply bg-white text-gray-800 antialiased leading-relaxed;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
a {
@apply text-blue-600 hover:underline transition;
}
input, textarea, button {
@apply outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50;
}
textarea {
@apply resize-y;
}
}
/* Reusable components */
@layer components {
.btn {
@apply inline-block px-4 py-2 rounded-md font-medium shadow-sm transition;
}
.btn-primary {
@apply btn bg-blue-600 text-white hover:bg-blue-700;
}
.btn-danger {
@apply btn bg-red-600 text-white hover:bg-red-700;
}
.btn-outline {
@apply btn border border-gray-300 text-gray-800 hover:bg-gray-100;
}
.card {
@apply p-4 border border-gray-200 rounded-xl bg-white shadow-sm hover:shadow transition;
}
.section-title {
@apply text-2xl font-semibold mb-4 border-b pb-2;
}
.form-field {
@apply block w-full rounded-md border border-gray-300 shadow-sm mt-1;
}
.form-label {
@apply block text-sm font-medium text-gray-700 mb-1;
}
}
/* Utility overrides or extras */
@layer utilities {
.text-muted {
@apply text-gray-500;
}
.max-w-read {
@apply max-w-prose mx-auto;
}
}