tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: { sans: ['Roboto', 'sans-serif'], brand: ['Manrope', 'sans-serif'] },
    },
    colors: {
      black: '#000',
      white: '#fff',
      // Grayscale Design palette: https://grayscale.design/app?lums=98.00,92.00,82.00,67.00,50.00,33.00,18.00,8.00,2.00&palettes=%23d89e67,%23e28be2,%23e49494,%2331c331,%232fbcbc,%23a3a3e8,%233684CC&filters=0%7C0,0%7C0,0%7C0,0%7C0,0%7C0,0%7C0,0%7C0&names=orang,pink,red,green,teal,purple,blue
      gray: {
        100: '#fdfdfd',
        200: '#f6f6f6',
        300: '#eaeaea',
        400: '#d6d6d6',
        500: '#bcbcbc',
        600: '#9b9b9b',
        700: '#767676',
        800: '#505050',
        900: '#272727',
      },
      orange: {
        100: '#fefdfc',
        200: '#fbf5ef',
        300: '#f5e7d9',
        400: '#edd1b7',
        500: '#e1b389',
        600: '#d18c4b',
        700: '#a7672b',
        800: '#72461d',
        900: '#37220e',
      },
      pink: {
        100: '#fefcfe',
        200: '#fcf3fc',
        300: '#f8e4f8',
        400: '#f2c9f2',
        500: '#e8a5e8',
        600: '#dc74dc',
        700: '#c431c4',
        800: '#872287',
        900: '#431143',
      },
      red: {
        100: '#fefcfc',
        200: '#fcf4f4',
        300: '#f8e5e5',
        400: '#f2cdcd',
        500: '#eaacac',
        600: '#df8181',
        700: '#d04444',
        800: '#962626',
        900: '#4b1313',
      },
      green: {
        100: '#fafefa',
        200: '#ebfaeb',
        300: '#cff3cf',
        400: '#9fe79f',
        500: '#58d558',
        600: '#2db32d',
        700: '#228822',
        800: '#175d17',
        900: '#0b2d0b',
      },
      teal: {
        100: '#fafefe',
        200: '#e7f9f9',
        300: '#c7f1f1',
        400: '#93e4e4',
        500: '#3fcfcf',
        600: '#2bacac',
        700: '#218282',
        800: '#165959',
        900: '#0b2b2b',
      },
      purple: {
        100: '#fdfdfe',
        200: '#f5f5fd',
        300: '#e8e8f9',
        400: '#d3d3f4',
        500: '#b7b7ed',
        600: '#9494e4',
        700: '#6868d9',
        800: '#3737cd',
        900: '#1a1a69',
      },
      blue: {
        100: '#fcfdff',
        200: '#eff7fd',
        300: '#d8ecfa',
        400: '#b6dbf5',
        500: '#85c3ef',
        600: '#43a2e6',
        700: '#197bc0',
        800: '#115281',
        900: '#092941',
      },
    },
    screens: {
      xs: '320px',
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    breakpointHelper: {
      selector: 'html.development body',
    },
  },

  plugins: [require('tailwindcss-breakpoint-helper'), require('tailwindcss-golden-ratio')],
};