tailwind.config.ts

import { Config } from 'tailwindcss';

const colorBase = {
  blue: {
    DEFAULT: '#357dc0',
    50: '#f3f8f9',
    100: '#daf1fa',
    200: '#afe0f5',
    300: '#7cc2e7',
    400: '#479ed3',
    500: '#357dc0',
    600: '#2d62a9',
    700: '#254a87',
    800: '#1b3260',
    900: '#101f3f',
  },
  gray: {
    DEFAULT: '#73707b',
    50: '#fafbfb',
    100: '#f1f1f2',
    200: '#e5e5e6',
    300: '#d5d4d8',
    400: '#a3a0a9',
    500: '#73707b',
    600: '#55535b',
    700: '#413e47',
    800: '#2a262f',
    900: '#19181b',
  },
  primary: {
    DEFAULT: '#02bb4d',
    50: '#f0fdf4',
    100: '#dcfce7',
    200: '#bbf7d0',
    300: '#86efac',
    400: '#4ade80',
    500: '#02bb4d',
    600: '#16a34a',
    700: '#15803d',
    800: '#166534',
    900: '#14532d',
  },
  secondary: {
    DEFAULT: '#875df1',
    50: '#f5f3ff',
    100: '#ede9fe',
    200: '#ddd6fe',
    300: '#c4b5fd',
    400: '#a78bfa',
    500: '#875df1',
    600: '#6f40ec',
    700: '#6131dd',
    800: '#531ed3',
    900: '#420ca9',
  },
  rose: {
    DEFAULT: '#f43f5e',
    50: '#fff1f2',
    100: '#ffe4e6',
    200: '#fecdd3',
    300: '#fda4af',
    400: '#fb7185',
    500: '#f43f5e',
    600: '#e11d48',
    700: '#be123c',
    800: '#9f1239',
    900: '#881337',
  },
  yellow: {
    DEFAULT: '#f59e0b',
    50: '#fffbeb',
    100: '#fef3c7',
    200: '#fde68a',
    300: '#fcd34d',
    400: '#fbbf24',
    500: '#f59e0b',
    600: '#d97706',
    700: '#b45309',
    800: '#92400e',
    900: '#78350f',
  },
};

export default {
  darkMode: 'class',
  plugins: [
    require('@tailwindcss/typography'),

    require('@tailwindcss/forms'),

    require('@tailwindcss/line-clamp'),

    require('@tailwindcss/aspect-ratio'),

    require('tailwind-scrollbar-hide'),
  ],
  content: [
    'components/**/*.{js,jsx,ts,tsx,vue}',
    'constants/**/*.{js,jsx,ts,tsx,vue}',
    'content/**/*.{md,yml,json,json5,csv}',
    'layouts/**/*.{js,jsx,ts,tsx,vue}',
    'pages/**/*.{js,jsx,ts,tsx,vue}',
    'plugins/**/*.{js,jsx,ts,tsx,vue}',
    'stories/**/*.{js,jsx,ts,tsx,vue}',
  ],
  safelist: [
    'whitelisted',
    {
      pattern:
        /(bg|text|border)-(primary|secondary|blue|yellow|gray|rose|white)(-([2589])0+)?/,
    },
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Red Hat Text', 'Red Hat Display', 'sans-serif'],
        serif: ['Red Hat Display', 'Red Hat Text', 'sans-serif'],
        monospace: ['JetBrains Mono', 'monospace'],
      },
      fontSize: {
        xs: ['.75rem', '1rem'],
        sm: ['.875rem', '1.25rem'],
        base: ['1rem', '1.5rem'],
        lg: ['1.125rem', '1.75rem'],
        xl: ['1.25rem', '1.75rem'],
        '2xl': ['1.5rem', '2rem'],
        '3xl': ['1.875rem', '2.25rem'],
        '4xl': ['2.25rem', '2.5rem'],
        '5xl': ['3rem', '3rem'],
        '6xl': ['3.75rem', '3.75rem'],
        '7xl': ['4.5rem', '4.5rem'],
        '8xl': ['6rem', '6rem'],
        '9xl': ['8rem', '8rem'],
      },
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        ...colorBase,
        warning: colorBase.yellow,
        danger: colorBase.rose,
        info: colorBase.blue,
        success: colorBase.primary,
      },
      boxShadow: {
        sm: ' 0px 0px 2px rgba(0, 0, 0, 0.2)',
        base: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.1)',
        down: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 0px 4px rgba(0, 0, 0, 0.1)',
        md: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 4px 8px rgba(0, 0, 0, 0.15)',
        lg: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 8px 16px rgba(0, 0, 0, 0.15)',
        xl: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 12px 24px rgba(0, 0, 0, 0.15)',
        '2xl':
          '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 24px 48px rgba(0, 0, 0, 0.15)',
      },
      container: {
        center: true,
      },
      gridTemplateColumns: {
        'auto-fit': 'repeat(auto-fit, minmax(0, 1fr))',
        'auto-fill': 'repeat(auto-fill, minmax(0, 1fr))',
      },
      gridTemplateRows: {
        'auto-fit': 'repeat(auto-fit, minmax(0, 1fr))',
        'auto-fill': 'repeat(auto-fill, minmax(0, 1fr))',
      },
      borderRadius: {
        none: '0',
        xs: '0.0625rem',
        sm: '0.125rem',
        default: '0.1875rem',
        lg: '0.25rem',
        xl: '0.3125rem',
        '2xl': '0.375rem',
        '3xl': '0.5rem',
        '4xl': '0.75rem',
        '5xl': '0.9375rem',
        '6xl': '1.0625rem',
        '7xl': '1.1875rem',
        '8xl': '1.3125rem',
        '9xl': '1.5625rem',
        full: '9999px',
      },
      padding: {
        17: '76px',
      },
      backgroundImage: {
        quote: 'url("~/assets/images/icons/quote.svg")',
      },
    },
  },
} as Config;