Tailwind Configuration Starter - Marko Krstic

config

module.exports = {
  theme: {
    colors: {
      'transparent': 'transparent',
      'current': 'currentColor',
      'bg': '#ffffff',
      'bg-alt': '#F6F6F6',
      'text': '#000000',
      'text-atl': '#404040',
      'brand': '#352FE7',
      'action': '#2AEBDC',
      'action-hover': '#2AEBDC',
      'action-text': '#2AEBDC',
    },

    spacing: {
      none: '0',
      '0': '0',
      xs:     'var(--space-size--xs)',
      sm:     'var(--space-size--sm)',
      base:   'var(--space-size--base)',
      lg:     'var(--space-size--lg)',
      xl:     'var(--space-size--xl)',
      xxl:    'var(--space-size--xxl)',
      giga:   'var(--space-size--giga)',
    },

    fontSize: {
      sm:     'var(--space-size-sm)',
      base:   'var(--space-size-base)',
      lg:     'var(--space-size-lg)',
      xl:     'var(--space-size-xl)',
      xxl:    'var(--space-size-xxl)',
      giga:   'var(--space-size-giga)',
    },

    maxWidth: {
      'container-narrow': '800px',
      'container':        '1440px',
      'container-wide':   '1680px',
      'card':             '400px',
    },

    extend: {
      fontFamily: {
        display: ['Title', ' ui-sans-serif', 'system-ui', '-apple-system', 'Arial', 'sans-serif'],
        body: ['Body', ' ui-sans-serif', 'system-ui', '-apple-system', 'Arial', 'sans-serif'],
      },
    },

  },
  plugins: [],
}

css.css

html{
  font-size: 62.5%;
}

:root{
  /* space */
  /* 
  https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=400&minRatio=1.8&maxFontSize=10&maxWidth=1600&maxRatio=2&steps=xsm%2Csm%2Cbase%2Clg%2Cxl%2Cxxl%2Cgiga&baseStep=base&prefix=space-size-&decimals=2&previewFont=Inter 
  */
  --space-size-xsm: clamp(2.47px, 0vw + 2.46px, 2.5px);
  --space-size-sm: clamp(4.44px, 0.05vw + 4.26px, 5px);
  --space-size-base: clamp(8px, 0.17vw + 7.33px, 10px);
  --space-size-lg: clamp(14.4px, 0.47vw + 12.53px, 20px);
  --space-size-xl: clamp(25.92px, 1.17vw + 21.23px, 40px);
  --space-size-xxl: clamp(46.66px, 2.78vw + 35.54px, 80px);
  --space-size-giga: clamp(83.98px, 6.33vw + 58.64px, 160px);


  /* font-size */
  /* 
  https://www.fluid-type-scale.com/calculate?minFontSize=14&minWidth=400&minRatio=1.414&maxFontSize=16&maxWidth=1600&maxRatio=1.618&steps=sm%2Cbase%2Clg%2Cxl%2Cxxl%2Cgiga&baseStep=base&prefix=font-size-&decimals=2&previewFont=Inter 
  */

  --font-size--sm: clamp(9.9px, 0vw + 9.91px, 9.89px);
  --font-size--base: clamp(14px, 0.17vw + 13.33px, 16px);
  --font-size--lg: clamp(19.8px, 0.51vw + 17.77px, 25.89px);
  --font-size--xl: clamp(27.99px, 1.16vw + 23.36px, 41.89px);
  --font-size--xxl: clamp(39.58px, 2.35vw + 30.18px, 67.77px);
  --font-size--giga: clamp(55.97px, 4.47vw + 38.07px, 109.66px);

}

@tailwind base;
@tailwind components;
@tailwind utilities;