UserDashboard/tailwind.config.js
2025-06-03 16:56:25 +08:00

128 lines
4.4 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');
const rotateX = plugin(function ({ addUtilities }) {
addUtilities({
'.rotate-y-180': {
transform: 'rotateY(180deg)',
},
});
});
module.exports = {
content: ['./App.tsx', './app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
container: {
center: true,
},
extend: {
colors: {
rtgray: {
50: '#F9FAFB',
100: '#F3F4F6',
200: '#E6E6EA',
300: '#D3D4D9',
400: '#9EA1AD',
500: '#6D707E',
600: '#4D5261',
700: '#3A3F4E',
800: '#222634',
900: '#141624',
1000: '#080912',
},
rtyellow: {
200: '#FCD913',
300: '#E6C812',
500: '#F2BE03',
600: '#D9A003',
},
rtbrown: {
800: '#301E03',
},
rtwhite: '#FFFFFF',
primary: {
DEFAULT: '#fcd913',
light: '#eaf1ff',
'dark-light': 'rgba(67,97,238,.15)',
},
secondary: {
DEFAULT: '#805dca',
light: '#ebe4f7',
'dark-light': 'rgb(128 93 202 / 15%)',
},
success: {
DEFAULT: '#00ab55',
light: '#ddf5f0',
'dark-light': 'rgba(0,171,85,.15)',
},
danger: {
DEFAULT: '#e7515a',
light: '#fff5f5',
'dark-light': 'rgba(231,81,90,.15)',
},
warning: {
DEFAULT: '#e2a03f',
light: '#fff9ed',
'dark-light': 'rgba(226,160,63,.15)',
},
info: {
DEFAULT: '#2196f3',
light: '#e7f7ff',
'dark-light': 'rgba(33,150,243,.15)',
},
dark: {
DEFAULT: '#3b3f5c',
light: '#eaeaec',
'dark-light': 'rgba(59,63,92,.15)',
},
black: {
DEFAULT: '#0e1726',
light: '#e3e4eb',
'dark-light': 'rgba(14,23,38,.15)',
},
white: {
DEFAULT: '#ffffff',
light: '#e0e6ed',
dark: '#888ea8',
},
},
fontFamily: {
nunito: ['var(--font-nunito)'],
exo2: ['var(--font-exo2)'],
sans: ['var(--font-sans)'],
mono: ['var(--font-mono)'],
},
spacing: {
4.5: '18px',
},
boxShadow: {
'3xl': '0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)',
},
typography: ({ theme }) => ({
DEFAULT: {
css: {
'--tw-prose-invert-headings': theme('colors.white.dark'),
'--tw-prose-invert-links': theme('colors.white.dark'),
h1: { fontSize: '40px', marginBottom: '0.5rem', marginTop: 0 },
h2: { fontSize: '32px', marginBottom: '0.5rem', marginTop: 0 },
h3: { fontSize: '28px', marginBottom: '0.5rem', marginTop: 0 },
h4: { fontSize: '24px', marginBottom: '0.5rem', marginTop: 0 },
h5: { fontSize: '20px', marginBottom: '0.5rem', marginTop: 0 },
h6: { fontSize: '16px', marginBottom: '0.5rem', marginTop: 0 },
p: { marginBottom: '0.5rem' },
li: { margin: 0 },
img: { margin: 0 },
},
},
}),
},
},
plugins: [
require('@tailwindcss/forms')({
strategy: 'class',
}),
require('@tailwindcss/typography'),
rotateX,
],
};