lollms-webui/web/tailwind.config.js
2024-12-21 00:02:35 +01:00

92 lines
3.2 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}'
],
darkMode: 'class',
theme: {
extend: {
colors: {
'primary': 'var(--color-primary)',
'primary-light': 'var(--color-primary-light)',
'secondary': 'var(--color-secondary)',
'accent': 'var(--color-accent)',
'light-text-panel': 'var(--color-light-text-panel)',
'bg-light': 'var(--color-bg-light)',
'bg-light-tone': 'var(--color-bg-light-tone)',
'bg-light-panel': 'var(--color-bg-light-panel)',
'bg-light-code-block': 'var(--color-bg-light-code-block)',
'bg-light-tone-panel': 'var(--color-bg-light-tone-panel)',
'bg-light-discussion': 'var(--color-bg-light-discussion)',
'bg-light-discussion-odd': 'var(--color-bg-light-discussion-odd)',
'dark-text-panel': 'var(--color-dark-text-panel)',
'bg-dark': 'var(--color-bg-dark)',
'bg-dark-tone': 'var(--color-bg-dark-tone)',
'bg-dark-tone-panel': 'var(--color-bg-dark-tone-panel)',
'bg-dark-code-block': 'var(--color-bg-dark-code-block)',
'bg-dark-discussion': 'var(--color-bg-dark-discussion)',
'bg-dark-discussion-odd': 'var(--color-bg-dark-discussion-odd)'
},
fontFamily: {
sans: [
'Inter', // Modern, professional font with excellent readability
'Outfit', // Clean and contemporary
'PTSans', // Keeping your existing font
'Roboto', // Keeping your existing font
'ui-sans-serif', // System UI font
'system-ui', // System default
'-apple-system', // Apple systems
'BlinkMacSystemFont', // Chrome on macOS
'Segoe UI', // Windows
'Arial', // Universal fallback
'sans-serif' // Final fallback
],
// You might also want to add specific font configurations for different purposes
heading: [
'Montserrat', // Professional heading font
'Inter',
'sans-serif'
],
mono: [
'JetBrains Mono', // High-quality monospace font
'Consolas',
'monospace'
]
},
container: {
padding: '2rem',
center: true
},
backgroundImage: {
'gradient-light': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
'gradient-dark': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
},
gradientColorStops: {
'light-start': '#e0eaff',
'light-end': '#f0e6ff',
'dark-start': '#0f2647',
'dark-end': '#1e1b4b',
},
}
},
plugins: [
require('flowbite/plugin'),
require('tailwind-scrollbar'),
function({ addBase, theme }) {
addBase({
'body': {
'@apply bg-gradient-light from-light-start to-light-end dark:bg-gradient-dark dark:from-dark-start dark:to-dark-end min-h-screen': {}
},
})
}
],
variants: {
h1: {
fontWeight: 'bold'
}
}
}