tailwind.config.js

const colors = require('tailwindcss/colors');

const defaultFontFamily = {
    sans: [
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'BlinkMacSystemFont',
        'Segoe UI',
        'Roboto',
        'Helvetica Neue',
        'Arial',
        'Noto Sans',
        'sans-serif',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji',
    ],
    serif: [
        'ui-serif',
        'Georgia',
        'Cambria',
        'Times New Roman',
        'Times',
        'serif',
    ],
    mono: [
        'ui-monospace',
        'SFMono-Regular',
        'Menlo',
        'Monaco',
        'Consolas',
        'Liberation Mono',
        'Courier New',
        'monospace',
    ],
};

module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './layouts/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {},
        colors: {
            ...colors,
        },
        fontFamily: {
            sans: ['Poppins', ...defaultFontFamily['sans']],
            serif: [...defaultFontFamily['serif']],
            mono: [...defaultFontFamily['mono']],
            body: ['Lato', ...defaultFontFamily['sans']],
        },
    },
    plugins: [],
};