🌈

Tailwindcss + Custom Font

Tailwindcss에서 커스텀 폰트를 사용하고 싶을 때가 있다.
이때, 폰트를 public 경로에 두고 이를 가져오는 .css파일을 작성한다.

그 이후에 @import url('작성한 css');를 tailwind를 설정하는 부분에 넣어준다.

12345
@import url('작성한 css');


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

그 이후에 tailwind.config.js에서 사용할 폰트를 지정해준다.

123456789
module.exports = {
    theme: {
        extend: {
            fontFamily: {
                mono: ['Custom Font Family', ...],
            },
        },
    },
}

Reference