Files
spritesheet-generator/tailwind.config.js
2025-05-05 08:52:16 +02:00

72 lines
1.8 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
gray: {
900: '#111827', // bg-primary
800: '#1F2937', // bg-secondary
700: '#374151', // bg-tertiary
600: '#4B5563', // border
400: '#9CA3AF', // text-secondary
200: '#E5E7EB', // text-primary
},
blue: {
500: '#3B82F6', // accent
600: '#2563EB', // accent-hover
},
red: {
500: '#EF4444', // danger
600: '#DC2626', // danger-hover
},
green: {
500: '#10B981', // success
600: '#059669', // success-hover
}
},
boxShadow: {
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
},
typography: (theme) => ({
DEFAULT: {
css: {
maxWidth: 'none',
},
},
dark: {
css: {
color: theme('colors.gray.200'),
a: {
color: theme('colors.blue.500'),
'&:hover': {
color: theme('colors.blue.400'),
},
},
h1: {
color: theme('colors.gray.200'),
},
h2: {
color: theme('colors.gray.200'),
},
h3: {
color: theme('colors.gray.200'),
},
h4: {
color: theme('colors.gray.200'),
},
code: {
color: theme('colors.gray.200'),
backgroundColor: theme('colors.gray.800'),
},
pre: {
backgroundColor: theme('colors.gray.800'),
},
},
},
}),
},
},
plugins: [],
}