tailwind.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const colors = require('./src/theme/colors');

module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors,
      fontSize: {
        title1: '28px',
        title2: '22px',
        title3: '20px',
        headline: '17px',
        body: '17px',
        callout: '16px',
        subhead: '15px',
        footnote: '13px',
        caption1: '12px',
        caption2: '11px',

        sTitle1: '26px',
        sTitle2: '20px',
        sTitle3: '18px',
        sHeadline: '15px',
        sBody: '15px',
        sCallout: '14px',
        sSubhead: '13px',
        sFootnote: '12px',
        sCaption1: '11px',

        mTitle1: '27px',
        mTitle2: '21px',
        mTitle3: '19px',
        mHeadline: '16px',
        mBody: '16px',
        mCallout: '15px',
        mSubhead: '14px',
        mFootnote: '12px',
        mCaption1: '11px',
      },
      lineHeight: {
        title1: '34px',
        title2: '28px',
        title3: '24px',
        headline: '22px',
        body: '22px',
        callout: '21px',
        subhead: '20px',
        footnote: '18px',
        caption1: '16px',
        caption2: '13px',

        sTitle1: '32px',
        sTitle2: '24px',
        sTitle3: '22px',
        sHeadline: '20px',
        sBody: '20px',
        sCallout: '19px',
        sSubhead: '18px',
        sFootnote: '16px',
        sCaption1: '13px',

        mTitle1: '23px',
        mTitle2: '28px',
        mTitle3: '23px',
        mHeadline: '21px',
        mBody: '21px',
        mCallout: '20px',
        mSubhead: '19px',
        mFootnote: '16px',
        mCaption1: '13px',
      },
      fontFamily: {
        Bold: 'Bold',
        Medium: 'Medium',
        Regular: 'Regular',
        SemiBold: 'SemiBold',
      },
      borderWidth: {
        b02: '0.2px',
        b025: '0.25px',
        b03: '0.3px',
        b04: '0.4px',
        b05: '0.5px',
        b075: '0.75px',
        b1: '1px',
        b2: '2px',
        b3: '3px',
      },
      borderRadius: {},
      width: {},
      height: {
        h1: '1px',
        h2: '2px',
      },
    },
  },
  plugins: [],
};