Add typography to webui and fix markdown render problem
This commit is contained in:
yangdx
272
lightrag_webui/tailwind.config.js
Normal file
272
lightrag_webui/tailwind.config.js
Normal file
@@ -0,0 +1,272 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ['class'],
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./src/**/*.{ts,tsx}',
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: '2rem',
|
||||
screens: {
|
||||
'2xl': '1400px',
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
keyframes: {
|
||||
'accordion-down': {
|
||||
from: { height: 0 },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
},
|
||||
typography: {
|
||||
DEFAULT: {
|
||||
css: {
|
||||
maxWidth: '100%',
|
||||
color: 'var(--tw-prose-body)',
|
||||
'[class~="lead"]': {
|
||||
color: 'var(--tw-prose-lead)',
|
||||
},
|
||||
a: {
|
||||
color: 'var(--tw-prose-links)',
|
||||
textDecoration: 'underline',
|
||||
fontWeight: '500',
|
||||
},
|
||||
strong: {
|
||||
color: 'var(--tw-prose-bold)',
|
||||
fontWeight: '600',
|
||||
},
|
||||
'ol[type="A"]': {
|
||||
listStyleType: 'upper-alpha',
|
||||
},
|
||||
'ol[type="a"]': {
|
||||
listStyleType: 'lower-alpha',
|
||||
},
|
||||
'ol[type="A" s]': {
|
||||
listStyleType: 'upper-alpha',
|
||||
},
|
||||
'ol[type="a" s]': {
|
||||
listStyleType: 'lower-alpha',
|
||||
},
|
||||
'ol[type="I"]': {
|
||||
listStyleType: 'upper-roman',
|
||||
},
|
||||
'ol[type="i"]': {
|
||||
listStyleType: 'lower-roman',
|
||||
},
|
||||
'ol[type="I" s]': {
|
||||
listStyleType: 'upper-roman',
|
||||
},
|
||||
'ol[type="i" s]': {
|
||||
listStyleType: 'lower-roman',
|
||||
},
|
||||
'ol[type="1"]': {
|
||||
listStyleType: 'decimal',
|
||||
},
|
||||
'ol > li': {
|
||||
position: 'relative',
|
||||
paddingLeft: '1.75em',
|
||||
},
|
||||
'ol > li::before': {
|
||||
content: 'counter(list-item, var(--list-counter-style, decimal)) "."',
|
||||
position: 'absolute',
|
||||
fontWeight: '400',
|
||||
color: 'var(--tw-prose-counters)',
|
||||
left: '0',
|
||||
},
|
||||
'ul > li': {
|
||||
position: 'relative',
|
||||
paddingLeft: '1.75em',
|
||||
},
|
||||
'ul > li::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
backgroundColor: 'var(--tw-prose-bullets)',
|
||||
borderRadius: '50%',
|
||||
width: '0.375em',
|
||||
height: '0.375em',
|
||||
top: 'calc(0.875em - 0.1875em)',
|
||||
left: '0.25em',
|
||||
},
|
||||
hr: {
|
||||
borderColor: 'var(--tw-prose-hr)',
|
||||
borderTopWidth: 1,
|
||||
marginTop: '3em',
|
||||
marginBottom: '3em',
|
||||
},
|
||||
blockquote: {
|
||||
fontWeight: '500',
|
||||
fontStyle: 'italic',
|
||||
color: 'var(--tw-prose-quotes)',
|
||||
borderLeftWidth: '0.25rem',
|
||||
borderLeftColor: 'var(--tw-prose-quote-borders)',
|
||||
quotes: '"\\201C""\\201D""\\2018""\\2019"',
|
||||
marginTop: '1.6em',
|
||||
marginBottom: '1.6em',
|
||||
paddingLeft: '1em',
|
||||
},
|
||||
h1: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '800',
|
||||
fontSize: '2.25em',
|
||||
marginTop: '0',
|
||||
marginBottom: '0.8888889em',
|
||||
lineHeight: '1.1111111',
|
||||
},
|
||||
h2: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '700',
|
||||
fontSize: '1.5em',
|
||||
marginTop: '2em',
|
||||
marginBottom: '1em',
|
||||
lineHeight: '1.3333333',
|
||||
},
|
||||
h3: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '600',
|
||||
fontSize: '1.25em',
|
||||
marginTop: '1.6em',
|
||||
marginBottom: '0.6em',
|
||||
lineHeight: '1.6',
|
||||
},
|
||||
h4: {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '600',
|
||||
marginTop: '1.5em',
|
||||
marginBottom: '0.5em',
|
||||
lineHeight: '1.5',
|
||||
},
|
||||
'figure > *': {
|
||||
margin: '0',
|
||||
},
|
||||
figcaption: {
|
||||
color: 'var(--tw-prose-captions)',
|
||||
fontSize: '0.875em',
|
||||
lineHeight: '1.4285714',
|
||||
marginTop: '0.8571429em',
|
||||
},
|
||||
code: {
|
||||
color: 'var(--tw-prose-code)',
|
||||
fontWeight: '600',
|
||||
fontSize: '0.875em',
|
||||
},
|
||||
'code::before': {
|
||||
content: '""',
|
||||
},
|
||||
'code::after': {
|
||||
content: '""',
|
||||
},
|
||||
'a code': {
|
||||
color: 'var(--tw-prose-links)',
|
||||
},
|
||||
'h1 code': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'h2 code': {
|
||||
color: 'inherit',
|
||||
fontSize: '0.875em',
|
||||
},
|
||||
'h3 code': {
|
||||
color: 'inherit',
|
||||
fontSize: '0.9em',
|
||||
},
|
||||
'h4 code': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'blockquote code': {
|
||||
color: 'inherit',
|
||||
},
|
||||
'thead': {
|
||||
color: 'var(--tw-prose-headings)',
|
||||
fontWeight: '600',
|
||||
borderBottomWidth: '1px',
|
||||
borderBottomColor: 'var(--tw-prose-th-borders)',
|
||||
},
|
||||
'thead th': {
|
||||
verticalAlign: 'bottom',
|
||||
paddingRight: '0.5714286em',
|
||||
paddingBottom: '0.5714286em',
|
||||
paddingLeft: '0.5714286em',
|
||||
},
|
||||
'tbody tr': {
|
||||
borderBottomWidth: '1px',
|
||||
borderBottomColor: 'var(--tw-prose-td-borders)',
|
||||
},
|
||||
'tbody tr:last-child': {
|
||||
borderBottomWidth: '0',
|
||||
},
|
||||
'tbody td': {
|
||||
verticalAlign: 'baseline',
|
||||
paddingTop: '0.5714286em',
|
||||
paddingRight: '0.5714286em',
|
||||
paddingBottom: '0.5714286em',
|
||||
paddingLeft: '0.5714286em',
|
||||
},
|
||||
p: {
|
||||
marginTop: '1.25em',
|
||||
marginBottom: '1.25em',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
// Using ES module imports
|
||||
// Note: This assumes these packages support ES module imports
|
||||
// If issues occur, may need to fallback to require() and disable ESLint rules
|
||||
import('tailwindcss-animate').then(module => module.default),
|
||||
import('@tailwindcss/typography').then(module => module.default),
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user