duckil_plm/plm-app/tailwind.config.ts
2024-12-26 20:26:24 +09:00

122 lines
3.2 KiB
TypeScript

import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
fontSize: {
xs: '0.65rem',
sm: '0.75rem',
base: '0.85rem',
lg: '0.95rem',
xl: '1.05rem',
'2xl': '1.25rem',
'3xl': '1.5rem',
'4xl': '1.75rem',
'5xl': '2rem',
'6xl': '2.25rem',
'7xl': '2.5rem',
'8xl': '3rem',
'9xl': '3.75rem'
},
spacing: {
px: '1px',
0: '0px',
0.5: '0.1rem',
1: '0.2rem',
1.5: '0.3rem',
2: '0.4rem',
2.5: '0.5rem',
3: '0.6rem',
3.5: '0.7rem',
4: '0.8rem',
5: '1rem',
6: '1.2rem',
7: '1.4rem',
8: '1.6rem',
9: '1.8rem',
10: '2rem',
11: '2.2rem',
12: '2.4rem',
14: '2.8rem',
16: '3.2rem',
20: '4rem',
24: '4.8rem',
28: '5.6rem',
32: '6.4rem',
36: '7.2rem',
40: '8rem',
44: '8.8rem',
48: '9.6rem',
52: '10.4rem',
56: '11.2rem',
60: '12rem',
64: '12.8rem',
72: '14.4rem',
80: '16rem',
96: '19.2rem'
},
extend: {
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
height: {
screen: '100dvh'
},
minHeight: {
screen: '100dvh'
}
}
},
plugins: [require("tailwindcss-animate")],
} as const;
export default config;