shopify-html/tailwind.config.js

tailwind.config = {
    theme: {
      fontFamily: {
          ms: ["Montserrat", "sans-serif"],
          dm: ["DM Serif Display", "serif"]
        },
      screens: {
          sm: '480px',
          md: '768px',
          lg: '976px',
          xl: '1200px',
      },
      extend: {
        colors: {
          purple1: '#9773fa',
          purple2: '#9874FF',
          grey1: '#DADADA',
          grey2: '#D7D7D7',
          grey3: '#828282',
          grey4: '#E8E8E8',
          pink1: '#E34FA5'
        },
        fontSize: {
          '5.5': '1.375rem', // 22px
          '10': '2.5rem', // 40px
          '16.25': '4.063rem', // 65px
          '20': '5rem' // 80px
        },
        lineHeight: {
          '3.5': '0.875rem', // 14px
          '4.5': '1.125rem', // 18px
          '5.5': '1.375rem', // 22px
          '12': '3rem', // 48px
          '20': '5rem', // 80px
          '25': '6.25rem' // 100px
        },
        spacing: {
          '2.25': '0.563rem', // 9px
          '3.25': '0.813rem', // 13px
          '4.5': '1.125rem', // 18px
          '5.5': '1.375rem', // 22px
          '6.5': '1.625rem', // 26px
          '7.5': '1.875rem', // 30px
          '24': '6rem', // 96px
          '27.5': '6.875rem', // 110px
          '30': '7.5rem', // 120px
          '71.5': '17.875rem', // 286px
          '76': '19rem'
        },
        borderRadius: {
          '4.5': '1.125rem' // 18px
        }
      }
    }
  }