panel-web/packages/shadcn/tailwind.config.ts
2024-11-14 21:21:00 +07:00

122 lines
3.4 KiB
TypeScript

import type { Config } from 'tailwindcss';
import Animate from 'tailwindcss-animate';
const config = {
darkMode: ['class'],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'../../packages/shadcn/src/components/**/*.{ts,tsx}',
'../../packages/ui/src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: {
'DEFAULT': '1rem',
'sm': '2rem',
'lg': '4rem',
'xl': '5rem',
'2xl': '6rem',
},
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
},
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))',
},
'sidebar': {
'DEFAULT': 'hsl(var(--sidebar-background))',
'foreground': 'hsl(var(--sidebar-foreground))',
'primary': 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
'accent': 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
'border': 'hsl(var(--sidebar-border))',
'ring': 'hsl(var(--sidebar-ring))',
},
'color-1': 'hsl(var(--color-1))',
'color-2': 'hsl(var(--color-2))',
'color-3': 'hsl(var(--color-3))',
'color-4': 'hsl(var(--color-4))',
'color-5': 'hsl(var(--color-5))',
},
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',
},
},
'scroll': {
to: {
transform: 'translate(calc(-50% - 0.5rem))',
},
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
'scroll':
'scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite',
},
},
},
plugins: [Animate],
} satisfies Config;
export default config;