tailwind.config.cjs

/** @type {import('tailwindcss').Config} */

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    screens: {
      '2xl': { max: '1680px' },
      xl: { max: '1024px' },
      lg: { max: '768px' },
      md: { max: '547px' },
      sm: { max: '440px' },
    },
    extend: {
      colors: {
        grey: {
          100: 'rgb(244, 244, 246)',
          200: 'rgb(242, 242, 242)',
          300: 'rgb(212, 212, 216)',
          500: 'rgb(155, 163, 175)',
          700: 'rgb(96, 95, 111)',
        },
        orange: {
          100: 'rgb(254, 226, 225)',
          200: 'rgb(255, 237, 213)',
          500: 'rgb(204, 144, 115)',
          700: 'rgb(248, 113, 113)',
          800: 'rgb(155, 52, 18)',
          900: 'rgb(165, 52, 52)',
        },
        yelow: {
          100: 'rgb(254, 249, 195)',
          500: 'rgb(250, 204, 22)',
          700: 'rgb(155, 108, 49)',
        },
        green: {
          100: 'rgb(232, 254, 240)',
          500: 'rgb(73, 222, 128)',
          700: 'rgb(35, 111, 64)',
        },
        blue: {
          100: 'rgb(238, 242, 255)',
          150: 'rgb(220, 234, 254)',
          200: 'rgb(224, 231, 255)',
          400: 'rgb(42, 75, 180)',
          450: 'rgb(130, 140, 249)',
          500: 'rgb(132, 114, 220)',
          600: 'rgb(96, 165, 250)',
          700: 'rgb(93, 62, 206)',
          900: 'rgb(71, 36, 199)',
        },
        violet: {
          100: 'rgb(243, 232, 255)',
          500: 'rgb(193, 132, 253)',
          700: 'rgb(115, 47, 173)',
        },
        pink: {
          100: 'rgb(252, 231, 243)',
          500: 'rgb(245, 122, 186)',
          900: 'rgb(168, 50, 98)',
        },
        black: 'rgb(63, 63, 70)',
        red: {
          300: 'rgb(248, 112, 113)',
          900: 'rgb(163, 36, 87)',
        },
      },
    },
  },
  plugins: [],
};