Adding emoji country flag support to NextJS + Tailwind app

@components/CountryFlagsPolyfill.tsx

"use client"

import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill"
import { useEffect } from "react"

export function CountryFlagsPolyfill() {
  useEffect(() => {
    polyfillCountryFlagEmojis()
  }, [])

  return null
}

/app/layout.tsx

import { CountryFlagsPolyfill } from "@/components/CountryFlagsPolyfill"
// choose font
import { Inter } from "next/font/google"

// variant
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})


export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body className={`${inter.variable} font-sans`}>

Easisest way is to rewrite sans fonts:

/app/globals.css

@layer base {
  :root {
    --font-sans:
      "Twemoji Country Flags", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
}

bre7/readme.md

Adding emoji country flag support to NextJS + Tailwind app