gbclient/tailwind.config.cjs
Rodrigo Rodriguez (Pragmatismo) 473fae930a
Some checks failed
GBCI / build (push) Failing after 2m23s
feat: add new UI components including Drawer, InputOTP, Pagination, Sidebar, Sonner, and ToggleGroup
- Implemented Drawer component for modal-like functionality.
- Added InputOTP component for handling one-time password inputs.
- Created Pagination component for navigating through paginated content.
- Developed Sidebar component with collapsible and mobile-friendly features.
- Integrated Sonner for toast notifications with theme support.
- Introduced ToggleGroup for grouping toggle buttons with context support.
- Added useIsMobile hook to determine mobile view based on screen width.
2025-06-21 19:45:21 -03:00

182 lines
No EOL
4.6 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
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))'
},
gray: {
'50': '#f9fafb',
'100': '#f3f4f6',
'200': '#e5e7eb',
'300': '#d1d5db',
'400': '#9ca3af',
'500': '#6b7280',
'600': '#4b5563',
'700': '#374151',
'800': '#1f2937',
'900': '#111827'
},
blue: {
'50': '#eff6ff',
'100': '#dbeafe',
'200': '#bfdbfe',
'300': '#93c5fd',
'400': '#60a5fa',
'500': '#3b82f6',
'600': '#2563eb',
'700': '#1d4ed8',
'800': '#1e40af',
'900': '#1e3a8a'
},
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))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
xl: '0.75rem',
'2xl': '1rem'
},
animation: {
bounce: 'bounce 1s infinite',
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
},
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'
}
}
},
transitionDuration: {
'200': '200ms',
'300': '300ms'
},
maxWidth: {
'4xl': '56rem',
'85%': '85%',
'75%': '75%'
},
spacing: {
'14': '3.5rem',
'80': '20rem',
'0.5': '0.125rem',
'1.5': '0.375rem',
'2.5': '0.625rem',
'3.5': '0.875rem'
}
}
},
plugins: [
// From second config
require("tailwindcss-animate"),
// From first config
function({ addUtilities }) {
const newUtilities = {
'.scrollbar-thin': {
'scrollbar-width': 'thin',
},
'.scrollbar-thumb-gray-400': {
'scrollbar-color': '#9ca3af transparent',
},
'.scrollbar-thumb-gray-600': {
'scrollbar-color': '#4b5563 transparent',
},
'.scrollbar-track-transparent': {
'scrollbar-track-color': 'transparent',
},
// WebKit scrollbar styles
'.scrollbar-thin::-webkit-scrollbar': {
width: '6px',
height: '6px',
},
'.scrollbar-thin::-webkit-scrollbar-track': {
background: 'transparent',
},
'.scrollbar-thin::-webkit-scrollbar-thumb': {
background: '#9ca3af',
'border-radius': '3px',
},
'.scrollbar-thin::-webkit-scrollbar-thumb:hover': {
background: '#6b7280',
},
'.dark .scrollbar-thin::-webkit-scrollbar-thumb': {
background: '#4b5563',
},
'.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover': {
background: '#374151',
},
}
addUtilities(newUtilities)
}
],
}