tailwind.config.js

module.exports = {
  theme: {
    borderWidth: {
      '0': '0',
      '2': '2px',
      '3': '3px',
    },
    fontFamily: {
      sans: ['Ringside Regular A', 'Ringside Regular B', 'Helvetica'],
      wide: [
        'Ringside Extra Wide SSm A',
        'Ringside Extra Wide SSm B',
        'Helvetica',
      ],
      compressed: [
        'Ringside Compressed A',
        'Ringside Compressed B',
        'Helvetica',
      ],
    },
    fontSize: {
      sm: '0.75rem', // 12px
      lg: '1.375rem', // 22px
      xl: '1.625rem', // 26px
      '2xl': '3.75rem', //60px
    },
    extend: {
      screens: {
        sm: '375px',
      },
      inset: {
        full: '100%',
      },
      opacity: {
        '10': '0.1',
        '90': '0.9',
      },
      colors: {
        liberty: '#B7E4CF',
        lightLiberty: '#E3F4EC',
        grey: '#d4d4da',
        navy: '#232444',
        purple: '#575993',
        offWhite: '#f7f7f7',
        red: '#B61B28',
        brightRed: '#EE2C3C',
        yellow: '#FFAA3B',
        white: '#FFFFFF',
      },
    },
  },
  variants: {
    appearance: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundColor: ['responsive', 'hover', 'focus'],
    backgroundPosition: ['responsive'],
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    borderCollapse: [],
    borderColor: ['responsive', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
    borderWidth: ['responsive', 'last'],
    cursor: ['responsive'],
    display: ['responsive', 'group-hover'],
    flexDirection: ['responsive'],
    flexWrap: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    justifyContent: ['responsive'],
    alignContent: ['responsive'],
    flex: ['responsive'],
    flexGrow: ['responsive'],
    flexShrink: ['responsive'],
    float: ['responsive'],
    fontFamily: ['responsive'],
    fontWeight: ['responsive', 'hover', 'focus'],
    height: ['responsive'],
    lineHeight: ['responsive'],
    listStylePosition: ['responsive'],
    listStyleType: ['responsive'],
    margin: ['responsive'],
    maxHeight: ['responsive'],
    maxWidth: ['responsive'],
    minHeight: ['responsive'],
    minWidth: ['responsive'],
    negativeMargin: ['responsive'],
    objectFit: ['responsive'],
    objectPosition: ['responsive'],
    opacity: ['responsive'],
    outline: ['focus'],
    overflow: ['responsive'],
    padding: ['responsive'],
    pointerEvents: ['responsive'],
    position: ['responsive'],
    inset: ['responsive'],
    resize: ['responsive'],
    boxShadow: ['responsive', 'hover', 'focus'],
    fill: [],
    stroke: [],
    tableLayout: ['responsive'],
    textAlign: ['responsive'],
    textColor: ['responsive', 'hover', 'focus'],
    fontSize: ['responsive'],
    fontStyle: ['responsive'],
    textTransform: ['responsive'],
    textDecoration: ['responsive', 'hover', 'focus'],
    fontSmoothing: ['responsive'],
    letterSpacing: ['responsive'],
    userSelect: ['responsive'],
    verticalAlign: ['responsive'],
    visibility: ['responsive', 'hover', 'group-hover'],
    whitespace: ['responsive'],
    wordBreak: ['responsive'],
    width: ['responsive'],
    zIndex: ['responsive'],
  },
  corePlugins: {
    container: false,
  },
  plugins: [],
};