AvanzaCast/tailwind.config.shared.js

130 lines
3.0 KiB
JavaScript

const colors = require('tailwindcss/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
important: true,
theme: {
screens: {
xs: '540px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
fontFamily: {
'sans': ['"Nunito", sans-serif'],
'nunito': ['"Nunito", sans-serif'],
'cursive': ['"Alex Brush", cursive'],
'serif': ['"EB Garamond", serif'],
},
container: {
center: true,
padding: {
DEFAULT: '12px',
sm: '1rem',
lg: '45px',
xl: '5rem',
'2xl': '13rem',
},
},
extend: {
colors: {
'dark': '#3c4858',
'black': '#161c2d',
'dark-footer': '#192132',
// Colores principales de AvanzaCast
primary: {
50: '#f5f3ff',
100: '#ede9fe',
200: '#ddd6fe',
300: '#c4b5fd',
400: '#a78bfa',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
},
secondary: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
},
},
boxShadow: {
sm: '0 2px 4px 0 rgb(60 72 88 / 0.15)',
DEFAULT: '0 0 3px rgb(60 72 88 / 0.15)',
md: '0 5px 13px rgb(60 72 88 / 0.20)',
lg: '0 10px 25px -3px rgb(60 72 88 / 0.15)',
xl: '0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)',
'2xl': '0 25px 50px -12px rgb(60 72 88 / 0.25)',
inner: 'inset 0 2px 4px 0 rgb(60 72 88 / 0.05)',
testi: '2px 2px 2px -1px rgb(60 72 88 / 0.15)',
},
spacing: {
0.75: '0.1875rem',
3.25: '0.8125rem'
},
maxWidth: {
'1200': '71.25rem',
'992': '60rem',
'768': '45rem',
},
zIndex: {
1: '1',
2: '2',
3: '3',
999: '999',
},
animation: {
'float': 'float 6s ease-in-out infinite',
'float-delayed': 'float 6s ease-in-out infinite 3s',
'fadeInUp': 'fadeInUp 0.6s ease-out',
'marquee': 'marquee 30s linear infinite',
'spin-slow': 'spin 10s linear infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' },
},
fadeInUp: {
'0%': {
opacity: '0',
transform: 'translateY(30px)',
},
'100%': {
opacity: '1',
transform: 'translateY(0)',
},
},
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-50%)' },
},
},
},
},
plugins: [
require('@tailwindcss/forms')({
strategy: 'class',
}),
],
}