tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: ['class'],
	content: [
		'./pages/**/*.{ts,tsx}',
		'./components/**/*.{ts,tsx}',
		'./app/**/*.{ts,tsx}',
		'./src/**/*.{ts,tsx}',
	],
	theme: {
		container: {
			center: true,
			padding: '2rem',
			screens: {
				'2xl': '1400px',
			},
		},
		fontSize: {
			'heading1-bold': [
				'36px',
				{
					lineHeight: '140%',
					fontWeight: '700',
				},
			],
			'heading1-semibold': [
				'36px',
				{
					lineHeight: '140%',
					fontWeight: '600',
				},
			],
			'heading2-bold': [
				'30px',
				{
					lineHeight: '140%',
					fontWeight: '700',
				},
			],
			'heading2-semibold': [
				'30px',
				{
					lineHeight: '140%',
					fontWeight: '600',
				},
			],
			'heading3-bold': [
				'24px',
				{
					lineHeight: '140%',
					fontWeight: '700',
				},
			],
			'heading4-medium': [
				'20px',
				{
					lineHeight: '140%',
					fontWeight: '500',
				},
			],
			'body-bold': [
				'18px',
				{
					lineHeight: '140%',
					fontWeight: '700',
				},
			],
			'body-semibold': [
				'18px',
				{
					lineHeight: '140%',
					fontWeight: '600',
				},
			],
			'body-medium': [
				'18px',
				{
					lineHeight: '140%',
					fontWeight: '500',
				},
			],
			'body-normal': [
				'18px',
				{
					lineHeight: '140%',
					fontWeight: '400',
				},
			],
			'body1-bold': [
				'18px',
				{
					lineHeight: '140%',
					fontWeight: '700',
				},
			],
			'base-regular': [
				'16px',
				{
					lineHeight: '140%',
					fontWeight: '400',
				},
			],
			'base-medium': [
				'16px',
				{
					lineHeight: '140%',
					fontWeight: '500',
				},
			],
			'base-semibold': [
				'16px',
				{
					lineHeight: '140%',
					fontWeight: '600',
				},
			],
			'base1-semibold': [
				'16px',
				{
					lineHeight: '140%',
					fontWeight: '600',
				},
			],
			'small-regular': [
				'14px',
				{
					lineHeight: '140%',
					fontWeight: '400',
				},
			],
			'small-medium': [
				'14px',
				{
					lineHeight: '140%',
					fontWeight: '500',
				},
			],
			'small-semibold': [
				'14px',
				{
					lineHeight: '140%',
					fontWeight: '600',
				},
			],
			'subtle-medium': [
				'12px',
				{
					lineHeight: '16px',
					fontWeight: '500',
				},
			],
			'subtle-semibold': [
				'12px',
				{
					lineHeight: '16px',
					fontWeight: '600',
				},
			],
			'tiny-medium': [
				'10px',
				{
					lineHeight: '140%',
					fontWeight: '500',
				},
			],
			'x-small-semibold': [
				'7px',
				{
					lineHeight: '9.318px',
					fontWeight: '600',
				},
			],
		},
		extend: {
			colors: {
				'primary-500': '#877EFF',
				'secondary-500': '#FFB620',
				blue: '#0095F6',
				'logout-btn': '#FF5A5A',
				'navbar-menu': 'rgba(16, 16, 18, 0.6)',
				'dark-1': '#000000',
				'dark-2': '#121417',
				'dark-3': '#101012',
				'dark-4': '#1F1F22',
				'light-1': '#FFFFFF',
				'light-2': '#EFEFEF',
				'light-3': '#7878A3',
				'light-4': '#5C5C7B',
				'gray-1': '#697C89',
				glassmorphism: 'rgba(16, 16, 18, 0.60)',
			},
			boxShadow: {
				'count-badge': '0px 0px 6px 2px rgba(219, 188, 159, 0.30)',
				'groups-sidebar': '-30px 0px 60px 0px rgba(28, 28, 31, 0.50)',
			},
			screens: {
				xs: '400px',
			},
			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 },
				},
			},
			animation: {
				'accordion-down': 'accordion-down 0.2s ease-out',
				'accordion-up': 'accordion-up 0.2s ease-out',
			},
		},
	},
	plugins: [require('tailwindcss-animate')],
};