tailwind font 폰트 테마 설정하기

tailwind.config.js 에 폰트 테마를 설정했다. 

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      screens: {},
      colors: {
        white: '#FFFFFF',
        mainColor: '#004C7E',
        subColor: '#F5F5F5',
        newsContent: '#757575',

        headerFooterColor: '#30363A',
        header: {
          blackbg: '#30363A',
          white: '#fff',
        },
      },
      fontFamily: {
        sans: ['Roboto'],
      },
      fontSize: {
        xs: [
          '14px',
          {
            lineHeignt: '22.8px',
          },
        ],
        base: [
          '16px',
          {
            lineHeignt: '26px',
            letterSpacing: '-0.05rem',
          },
        ],
        font18: [
          '18px',
          {
            lineHeignt: '28px',
            letterSpacing: '-0.05rem',
          },
        ],
        subTitleSize28: [
          '28px',
          {
            lineHeight: '44px',
            letterSpacing: '-0.05rem',
            fontWeight: '700',
          },
        ],
        subTitleSize32: [
          '32px',
          {
            lineHeight: '52px',
            letterSpacing: '-0.05rem',
            fontWeight: '700',
          },
        ],
        titleSize: [
          '50px',
          {
            lineHeight: '81.3px',
            fontWeight: '700',
            fontFamily: 'Roboto',
          },
        ],
      },
    },
  },
  variants: {},
  plugins: [require('tailwindcss'), require('precss'), require('autoprefixer'), require('@tailwindcss/line-clamp')],
};

사용예시 

 

                <h1 className="mb-[100px] text-titleSize">NEWS</h1>

                <h2 className="mb-[36px] text-[2rem] text-subTitleSize32 font-medium"> 전시&학회소식</h2>