News homepage

I tried to change the font family to Inter by doing this in my tailwind.config.js:

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        "soft-orange": "hsl(35, 77%, 62%)",
        "soft-red": "hsl(5, 85%, 63%)",
        "dark-blue": "hsl(240, 100%, 5%)",
        "dark-grayish-blue": "hsl(236, 13%, 42%)",
        "very-dark-blue": "hsl(240, 100%, 5%)",
        "grayish-blue": "hsl(233, 8%, 79%)",
        "off-white": "hsl(36, 100%, 99%)"
      },
      fontFamily: {
        "sans": ["Inter", ...defaultTheme.fontFamily.sans],
      }
    },
  },
  plugins: [],
}

However, doing so, for some reason breaks some of the functionality of the site, like disabling grid and flexbox from classes that contain the grid and flex classes respectively . This made me exclude the code for the font from the solution. I would like to know why this is happening and how to fix this.