tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      screens: {
        xs: '360px',
        sm: '576px',
        md: '992px',
        lg: '1280px',
        xl: '1400px',
        '2xl': '1920px'
      },
      fontFamily: {
        mono: ['Roboto', 'mono'],
        serif: ['Roboto', 'serif'],
        sans: ['Roboto', 'sans-serif']
      },
      colors: {
        transparent: 'transparent',
        gray: {
          50: '#FAFAFA',
          100: '#F5F5F5',
          200: '#EEEEEE',
          300: '#E0E0E0',
          400: '#BDBDBD',
          500: '#9E9E9E',
          600: '#757575',
          700: '#616161',
          800: '#424242',
          900: '#212121'
        },
        brand: {
          50: 'rgba(222, 230, 255, 0.9)',
          100: 'rgba(222, 230, 255, 0.9)',
          200: 'rgba(112, 132, 186, 1)',
          300: 'rgba(185, 198, 236, 1)',
          400: 'rgba(185, 198, 236, 1)',
          500: 'rgba(79, 98, 154, 1)',
          600: 'rgba(79, 98, 154, 1)',
          700: 'rgba(79, 98, 154, 1)',
          800: 'rgba(79, 98, 154, 1)',
          900: 'rgba(46, 65, 119, 1)',
        },
        cbrand: {
          50: 'rgba(222, 230, 255, 0.9)',
          100: 'rgba(222, 230, 255, 0.9)',
          200: 'rgba(112, 132, 186, 1)',
          300: 'rgba(185, 198, 236, 1)',
          400: 'rgba(185, 198, 236, 1)',
          500: 'rgba(79, 98, 154, 1)',
          600: 'rgba(79, 98, 154, 1)',
          700: 'rgba(79, 98, 154, 1)',
          800: 'rgba(79, 98, 154, 1)',
          900: 'rgba(46, 65, 119, 1)',
        },
        success: {
          dark: 'rgba(11, 141, 57, 1)',
          normal: 'rgba(41, 163, 84, 1)'
        }
      },
      padding: {},
      margin: {},
      fontSize: {
        h1: ['40px', '46px'],
        h2: ['32px', '40px'],
        h3: ['24px', '30px'],
        h4: ['20px', '26px'],
        h5: ['16px', '22px'],
        h6: ['14px', '20px'],
        xs: ['13px', '18px'],
        md: ['14px', '20px'],
        lg: ['16px', '22px'],
        xl: ['18px', '24px'],
        iconSm: ['18px', '18px'],
        icon: ['20px', '20px'],
        iconLg: ['24px', '24px'],
        iconXl: ['28px', '28px']
      },
      height: {
        em: '1em'
      },
      minHeight: {
        6: '1.25rem'
      },
      width: {
        em: '1em'
      },
      animation: {
        'spin-fast': 'spin 0.7s linear infinite'
      }
    }
  },
  plugins: [require('@tailwindcss/forms')]
}