tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx,css}", "./public/index.html"],
  darkMode: "media",
  theme: {
    extend: {
      colors: {
        "light-blue": colors.lightBlue,
        teal: colors.teal,
        cyan: colors.cyan,
        rose: colors.rose,
        brands: {
          "nhs-blue": "#005EB8",
          "nice-black": "#222222",
          "who-blue": "#0093d5",
          "bnf-black": "#111820",
        },
      },
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
      },
      transitionProperty: {
        height: "height",
      },
    },
  },
  variants: {
    extend: {
      cursor: ["responsive", "disabled"],
      backgroundColor: [
        "responsive",
        "group-hover",
        "focus-within",
        "hover",
        "focus",
        "disabled",
      ],
    },
  },
  plugins: [
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/line-clamp"),
  ],
};