Typical Tailwind Config

tailwind.config.js

const tColors = require('tailwindcss/colors');
const colors = {
  primary: '#FF0000',
  secondary: '#9E0000',
  gray: {
    100: '#EEF0F3',
    200: '#EDEDED',
    300: '#D9D9D9',
    400: '#AAAAAA',
    500: '#777777',
    650: '#545458',
    600: '#303030',
    700: '#1C1C1E',
    800: '#151515',
    820: '#181818',
    840: '#1B1B1B',
    900: '#0D0D0D',
  },
};

module.exports = {
  mode: 'jit',
  darkMode: 'class',
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './.storybook/**/*.{js,ts,jsx,tsx}',
    './assets/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    fontFamily: {
      sans: ['Helvetica', 'sans'],
    },
    colors: {
      primary: colors.primary,
      secondary: colors.secondary,
      gray: colors.gray,
      white: tColors.white,
      black: tColors.black,
      transparent: tColors.transparent,
    },
    screens: {
      xs: '360px',
      sm: '479px',
      md: '768px',
      lg: '992px',
      xl: '1280px',
      '2xl': '1440px',
      pointer: { raw: '(hover: hover)' },
    },
    lineHeight: {
      small: '120%',
      header: '140%',
      body: '160%',
    },
    extend: {
      spacing: {
        15: '3.75rem', // 60px
        18: '4.375rem', // 70px
        25: '6.25rem', // 100px
        26: '6.5rem', // 104px
        37: '9.375rem', //150px
        51: '12.5rem', //200px
        76: '19rem', //304px
        100: '25rem', //400px
      },
      fontSize: {
        '3xs': '.5625rem', // 9
        '2xs': '.625rem', // 10
        '3xl': '1.75rem', // 28
        '4xl': '2rem', // 32
      },
      dropShadow: {
        'card-sm': [
          '5px -5px 80px rgba(0, 0, 0, 0.03)',
          '0px 2px 2px rgba(0, 0, 0, 0.01)',
          '0px 6px 5px rgba(0, 0, 0, 0.01)',
          '0px 12px 10px rgba(0, 0, 0, 0.02)',
        ],
      },
      textUnderlineOffset: {
        3: '3px',
      },
      opacity: {
        25: '.25',
        65: '.65',
        85: '.85',
      },
      scale: {
        25: '25%',
      },
      zIndex: {
        60: '60',
        70: '70',
        80: '80',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        pulsesoft: {
          '0%, 60%': { opacity: '1' },
          '30%': { opacity: '0.85' },
        },
      },
      animation: {
        wiggle: 'wiggle 200ms ease-in-out',
        pulsesoft: 'pulsesoft 2000ms ease-in-out infinite',
      },
      transitionProperty: {
        size: 'width, height',
        spacings: 'margin, padding',
      },
      borderWidth: {
        0.5: '0.5px',
        3: '3px',
      },
      borderRadius: {
        xl: '1rem',
        '4xl': '2rem',
      },
      typography: {
        DEFAULT: {
          css: {
            fontSize: '1.25rem',
            lineHeight: '160%',
            maxWidth: '100%',
            color: tColors.black,
            a: {
              color: colors.primary,
              textDecoration: 'underline',
              '&:hover': {
                opacity: '.95',
              },
            },
          },
        },
        lg: {
          css: {
            fontSize: '1.5rem',
            lineHeight: '160%',
          },
        },
        sm: {
          css: {
            fontSize: '1rem',
            lineHeight: '160%',
          },
        },
        caption: {
          css: {
            fontSize: '.75rem',
            lineHeight: '1.1875rem',
          },
        },
      },
      lineClamp: {
        7: '7',
        8: '8',
      },
      letterSpacing: {
        tightest: '-.075em',
        'extra-wide': '.125em',
        '2px': '2px',
      },
      transitionDuration: {
        3000: '3000ms',
      },
    },
  },
};