Search code examples
cssnext.jsbackgroundtailwind-css

tailwind css not working after importing font

I'm working on a next.js project and using tailwind. There is a weird behavior when i'm importing custom font into globals.css

page.jsx

"use client";

import React from "react";

const page = () => {
  return (
    <div className=" w-full  h-screen flex flex-col justify-center items-center bg-cover bg-center  bg-sliding-image  ">
      <div className={`flex flex-col items-center border `}>
        <h1 className="font-greatvibes text-black">The Wedding Of</h1>
      </div>
    </div>
  );
};

export default page;

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        "sliding-image": "url('../assets/images/slidingimage.jpg')",
      },

      fontFamily: {
        satoshi: ["Satoshi", "sans-serif"],
        inter: ["Inter", "sans-serif"],
        abhaya: ["Abhaya Libre", "serif"],
        cormorant: ["Cormorant", "serif"],
        greatvibes: ["Great Vibes", "cursive"],
        roboto: ["Roboto", "sans-serif"],
      },
      colors: {
        "primary-orange": "#FF5722",
      },
      transitionDuration: {
        0: "0ms",
        3000: "3000ms",
      },
    },
  },
  plugins: [],
};

globals.css

@import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600&family=Cormorant:wght@400;500;600&family=Great+Vibes&family=Roboto:wght@400;500;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

here is what it looks like when i imported the font vs when i dont import it enter image description here

any idea how is this happening ? i dont even think it made sense

Solution

  • Try importing the fonts the "nextjs way", from documentation: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css

    You can add to your layout.jsx (replace with your font of choice):

    import { Inter, Roboto_Mono } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})
 
const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

    and in your tailwind.config.js:

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}