diff --git a/tailwind.config.mjs b/tailwind.config.mjs index f510dfe..771eb70 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -1,5 +1,5 @@ /** @type {import('tailwindcss').Config} */ - +import colors from 'tailwindcss/colors'; export default { content: [ "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", @@ -12,35 +12,15 @@ export default { current: "currentColor", black: "#000000", white: "#ffffff", - gray: { - 100: "#f3f4f6", - 300: "#d1d5db", - 500: "#6b7280", - 600: "#4b5563", - 800: "#1f2937", - }, - indigo: { - 200: "#c7d2fe", - 300: "#a5b4fc", - }, - neutral: { - 50: "#fafafa", - 100: "#f5f5f5", - 200: "#e5e5e5", - 300: "#d4d4d4", - 400: "#a3a3a3", - 500: "#737373", - 600: "#525252", - 700: "#404040", - 800: "#262626", - 900: "#171717", - }, + gray: colors.gray, + indigo: colors.indigo, + neutral: colors.neutral, // Used mainly for text color yellow: { 50: "#fefce8", 100: "#fef9c3", 400: "#facc15", 500: "#eab308", - }, + }, // Accent colors, used mainly for star color, heading and buttons orange: { 100: "#ffedd5", 200: "#fed7aa", @@ -48,20 +28,9 @@ export default { 400: "#fa5a15", 500: "#e14d0b", 600: "#ea580c", - }, - red: { - 400: "#f87171", - 500: "#ef4444", - }, - zinc: { - 200: "#e4e4e7", - 400: "#a1a1aa", - 500: "#71717a", - 600: "#52525b", - 700: "#3f3f46", - 800: "#27272a", - 900: "#18181b", - }, + }, // Primary colors, used mainly for links, buttons and svg icons + red: colors.red, // Used for bookmark icon + zinc: colors.zinc, // Used mainly for box-shadow }, extend: {}, },