Sage 10 - Load Tailwind fonts in theme.json

sage
1

Hi all,

We want to load our fonts from tailwind.config.js in the theme.json file.

But we can’t get it to work, here are our files:

bud.config.js

app.wpjson
        .setOption('styles', {
            typography: {
                fontFamily: 'var(--wp--preset--font-family--montserrat)',
            },
        })
        .setSettings({
            background: {
                backgroundImage: true,
            },
            color: {
                custom: false,
                customDuotone: false,
                customGradient: false,
                defaultDuotone: false,
                defaultGradients: false,
                defaultPalette: false,
                duotone: [],
            },
            custom: {
                spacing: {},
                typography: {
                    'font-size': {},
                    'line-height': {},
                },
            },
            spacing: {
                padding: true,
                units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
            },
            layout: {
                contentSize: '1500px',
                wideSize: '2000px',
            },
        })
        .useTailwindFontFamily()
        .useTailwindFontSize();

tailwind.config.js

/** @type {import('tailwindcss').Config} config */
const config = {
    content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
    theme: {
        fontFamily: {
            sans: ['Montserrat', 'Arial', 'sans-serif'],
        },
        container: {
            center: true,
            padding: '1rem',
        },
        extend: {
            colors: {
                primary: '#5D5DFF',
                secondary: '#FF5050',
                dark_gray: '#1A1818',
                light_gray: '#F1F1F1',
                white: '#FFFFFF',
            },
        },
    },
    plugins: [
        require('tailwindcss-debug-screens'),
    ]
};

export default config;

And this is the output of theme.json

{
  "__generated__": "⚠️ This file is generated. Do not edit.",
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "background": {
      "backgroundImage": true
    },
    "color": {
      "custom": false,
      "customDuotone": false,
      "customGradient": false,
      "defaultDuotone": false,
      "defaultGradients": false,
      "defaultPalette": false,
      "duotone": [],
      "palette": [
        {
          "name": "Rood",
          "slug": "primary",
          "color": "#5D5DFF"
        },
        {
          "name": "Blauw",
          "slug": "secondary",
          "color": "#FF5050"
        },
        {
          "name": "Donker grijs",
          "slug": "dark_gray",
          "color": "#1A1818"
        },
        {
          "name": "Licht grijs",
          "slug": "light_gray",
          "color": "#F1F1F1"
        }
      ]
    },
    "custom": {
      "spacing": {},
      "typography": {
        "font-size": {},
        "line-height": {}
      }
    },
    "spacing": {
      "padding": true,
      "units": [
        "px",
        "%",
        "em",
        "rem",
        "vw",
        "vh"
      ]
    },
    "layout": {
      "contentSize": "1550px",
      "wideSize": "2000px"
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
          "name": "Ui-sans-serif",
          "slug": "sans"
        },
        {
          "fontFamily": "ui-serif,Georgia,Cambria,\"Times New Roman\",Times,serif",
          "name": "Ui-serif",
          "slug": "serif"
        },
        {
          "fontFamily": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
          "name": "Ui-monospace",
          "slug": "mono"
        }
      ],
      "fontSizes": [
        {
          "name": "xs",
          "size": "0.75rem",
          "slug": "xs"
        },
        {
          "name": "sm",
          "size": "0.875rem",
          "slug": "sm"
        },
        {
          "name": "base",
          "size": "1rem",
          "slug": "base"
        },
        {
          "name": "lg",
          "size": "1.125rem",
          "slug": "lg"
        },
        {
          "name": "xl",
          "size": "1.25rem",
          "slug": "xl"
        },
        {
          "name": "2xl",
          "size": "1.5rem",
          "slug": "2xl"
        },
        {
          "name": "3xl",
          "size": "1.875rem",
          "slug": "3xl"
        },
        {
          "name": "4xl",
          "size": "2.25rem",
          "slug": "4xl"
        },
        {
          "name": "5xl",
          "size": "3rem",
          "slug": "5xl"
        },
        {
          "name": "6xl",
          "size": "3.75rem",
          "slug": "6xl"
        },
        {
          "name": "7xl",
          "size": "4.5rem",
          "slug": "7xl"
        },
        {
          "name": "8xl",
          "size": "6rem",
          "slug": "8xl"
        },
        {
          "name": "9xl",
          "size": "8rem",
          "slug": "9xl"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--montserrat)"
    }
  }
}

Does somebody know why the font sans: ['Montserrat', 'Arial', 'sans-serif'] is not being included in theme.json?

Thanks for your time!

2

Just chiming in with an example that works on my end:

bud.config.js

...
  app.wpjson
    .setSettings({
      ...
    })
    .useTailwindColors(true)
    .useTailwindFontFamily(true)
    .useTailwindFontSize(true)
    ...
    .enable();
};

tailwind.config.js

...
  theme: {
    extend: {
      ...
      fontFamily: {
        'serif': '"Lora", serif',
        'sans': '"Lato", sans-serif'
      },
    },
  },
...
};

export default config;

I then import the actual font in css. Hope that helps!

3

If i type in (true) it also doesn’t work. If i follow the documentation here:

It also says that you can add extend so it picks the fontFamilies in extend at tailwind.config.js but then we get another error:

tailwind.config.js

/** @type {import('tailwindcss').Config} config */
const config = {
    content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
    theme: {
        container: {
            center: true,
            padding: '1rem',
        },
        extend: {
            colors: {
                primary: '#5D5DFF',
                secondary: '#FF5050',
                dark_gray: '#1A1818',
                light_gray: '#F1F1F1',
                white: '#FFFFFF',
            },
            fontFamily: {
                sans: ['Montserrat', 'Arial', 'sans-serif'],
            },
        },
    },
    plugins: [
        require('tailwindcss-debug-screens'),
    ]
};

export default config;

bud.config.js

app.wpjson
        .setOption('styles', {
            typography: {
                fontFamily: 'var(--wp--preset--font-family--montserrat)',
            },
        })
        .setSettings({
            background: {
                backgroundImage: true,
            },
            color: {
                custom: false,
                customDuotone: false,
                customGradient: false,
                defaultDuotone: false,
                defaultGradients: false,
                defaultPalette: false,
                duotone: [],
                palette: [
                    {
                        name: 'Rood',
                        slug: 'primary',
                        color: '#5D5DFF',
                    },
                    {
                        name: 'Blauw',
                        slug: 'secondary',
                        color: '#FF5050',
                    },
                    {
                        name: 'Donker grijs',
                        slug: 'dark_gray',
                        color: '#1A1818',
                    },
                    {
                        name: 'Licht grijs',
                        slug: 'light_gray',
                        color: '#F1F1F1',
                    },
                ],
            },
            custom: {
                spacing: {},
                typography: {
                    'font-size': {},
                    'line-height': {},
                },
            },
            spacing: {
                padding: true,
                units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
            },
            layout: {
                contentSize: '1500px',
                wideSize: '2000px',
            },
            typography: {
                customFontSize: false,
                fontFamilies: [
                    {
                        slug: 'montserrat',
                        name: 'Montserrat',
                        fallbacks: ['sans-serif'],
                    }
                ],
            },
        })
        .useTailwindFontFamily(`extend`);

Error we get:
@roots/bud-tailwindcss: using extendOnlywith fontFamily buttheme.extend is not defined in your tailwind config.

But as you can see we do have theme.extend in the tailwind.config.js file.