Files
skillhub/apps/web/tailwind.config.ts
airano 97b427831a Initial release v1.0.0
Open-source marketplace for AI Agent skills.

Features:
- Next.js 15 web app with i18n (en/fa)
- CLI tool for skill installation (npx skillhub)
- GitHub crawler/indexer with multi-strategy discovery
- Security scanning for all indexed skills
- Self-hostable with Docker

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-12 06:42:07 +03:30

134 lines
4.1 KiB
TypeScript

import type { Config } from 'tailwindcss';
const config: Config = {
darkMode: ['class'],
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
],
theme: {
container: {
center: true,
padding: '1rem',
screens: {
'2xl': '1200px',
},
},
extend: {
fontFamily: {
sans: ['Vazirmatn', 'system-ui', 'sans-serif'],
},
colors: {
// Primary Colors - Sky Blue
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#66b3e6',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
// Accent - Gold
gold: {
DEFAULT: '#f7c150',
light: '#fbd87a',
dark: '#d4a43d',
},
// Text Colors - use CSS variables for dark mode support
text: {
primary: 'var(--color-text-primary)',
secondary: 'var(--color-text-secondary)',
muted: 'var(--color-text-muted)',
},
// Surface Colors - use CSS variables for dark mode support
surface: {
DEFAULT: 'var(--color-surface)',
elevated: 'var(--color-surface-elevated)',
muted: 'var(--color-surface-muted)',
subtle: 'var(--color-surface-subtle)',
},
// Border Colors - use CSS variables for dark mode support
border: {
DEFAULT: 'var(--color-border)',
light: 'var(--color-border-light)',
},
// States - use CSS variables for dark mode support
success: {
DEFAULT: 'var(--color-success)',
bg: 'var(--color-success-bg)',
},
warning: {
DEFAULT: 'var(--color-warning)',
bg: 'var(--color-warning-bg)',
},
error: {
DEFAULT: 'var(--color-error)',
bg: 'var(--color-error-bg)',
},
},
borderRadius: {
sm: '0.375rem',
md: '0.5rem',
lg: '0.75rem',
xl: '1rem',
'2xl': '1.5rem',
},
boxShadow: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
primary: '0 4px 15px rgba(102, 179, 230, 0.4)',
'primary-hover': '0 6px 20px rgba(102, 179, 230, 0.5)',
},
backgroundImage: {
'gradient-primary': 'linear-gradient(135deg, #66b3e6 0%, #3b82f6 100%)',
'gradient-hero': 'linear-gradient(180deg, rgba(102, 179, 230, 0.08) 0%, transparent 60%)',
'gradient-gold': 'linear-gradient(135deg, #f7c150 0%, #f59e0b 100%)',
},
animation: {
'fade-up': 'fadeUp 0.6s ease-out forwards',
'fade-in': 'fadeIn 0.3s ease-out forwards',
'slide-in-right': 'slideInRight 0.3s ease-out forwards',
'slide-in-left': 'slideInLeft 0.3s ease-out forwards',
'bounce-subtle': 'bounceSubtle 2s ease-in-out infinite',
},
keyframes: {
fadeUp: {
from: { opacity: '0', transform: 'translateY(30px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
fadeIn: {
from: { opacity: '0' },
to: { opacity: '1' },
},
slideInRight: {
from: { opacity: '0', transform: 'translateX(20px)' },
to: { opacity: '1', transform: 'translateX(0)' },
},
slideInLeft: {
from: { opacity: '0', transform: 'translateX(-20px)' },
to: { opacity: '1', transform: 'translateX(0)' },
},
bounceSubtle: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-4px)' },
},
},
transitionDuration: {
fast: '150ms',
normal: '200ms',
slow: '300ms',
},
},
},
plugins: [],
};
export default config;