Having trouble with Tailwind CSS not functioning correctly once the font is imported?

I am currently working on a next.js project and utilizing tailwind for styling. I have noticed an odd behavior when importing a custom font into my globals.css file.

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;

After importing the font, the appearance differs from when the font is not imported. https://i.stack.imgur.com/norIM.jpg

Any thoughts on why this might be happening? It's quite confusing to me.

cssnext.jsbackgroundtailwind-css

Answer №1

To efficiently import fonts the "nextjs way", follow the guidelines provided in the documentation: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css

Incorporate the following code snippet into your layout.jsx file (make sure to use your preferred font):

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>
  )
}

Add the below configuration to 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: [],
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically updating the JavaScript content on a webpage without having to refresh the entire HTML page, based on the changing

Is there a way to adjust the opacity change rate of my nav bar automatically without the need to refresh the page? The current opacity change rate is based on the width of the window, but once the page is loaded, adjusting the width does not affect the rat ...

javascriptjqueryhtmlcss

Arranging the list items in a perfectly straight vertical line

Concern: I'm struggling with alignment issues on my website. I have country flags displayed using display:inline;. The issue arises when the number next to the flag exceeds single digits (e.g., 10 or more) as it affects the alignment due to the consi ...

htmlcsslistalignment

problem with progressive web apps in next.js

When I answer yes to the question in the Next.js setup (Would you like to use App Router?), the PWA is not installed (install icon does not show) and I see this message when using the Lighthouse tab (page has no manifest link URL in Next.js). However, whe ...

next.jsprogressive-web-apps

Is there a way to use JavaScript to import several custom fonts at once?

Is there a way to import a long list of custom fonts as icons using Javascript? I have been obtaining the font list from an API, but importing them one by one with pure CSS using @font-face is time-consuming and difficult to maintain. @font-face { fon ...

javascriptcssreactjsfontsfont-face

Switching from a layout of 3 columns to 2 columns on iPad when orientation is changed to portrait

Apologies for posting this inquiry here, but I am facing a challenge with an iPad issue when switching to portrait orientation on my website. I am using a @media query to detect the portrait view and I want to switch from three columns to two. However, th ...

cssipadorientation

What is the best way to reset the values in react-multiple-datepicker?

Having trouble clearing values assigned in react-multiple-datepicker library. import MultipleDatePicker from "react-multiple-datepicker"; import React from "react"; class Addjob extends React.Component { constructor(props) { super ...

javascriptnode.jshtmlreactjscss

When utilizing 'fs' in Next.js, there are no error messages displayed, yet the file is not being written simultaneously. Unfortunately, I have been unable to locate any effective solutions to resolve this issue

I am currently encountering an issue while using the fs module in a Next.js/React application context. I am developing an app for renting apartments. I have a JSON file named database.json which contains some data, and I am able to retrieve and use it with ...

node.jsreactjsnext.jsnode.js-fs

Leveraging Next.js for Server-Side Data Persistence: A Guide to Accessing Data Across Page Calls

I have a custom-built server using Express in my Next.js application. This server performs continuous tasks and holds data in memory while the server is running. Now, I need to access this data from API calls made to the server. What would be the best app ...

node.jsexpressdictionarynext.js

Add the onclick() functionality to a personalized Angular 4 directive

I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the ...

javascriptcssangulartypescriptangularjs-directive

The Infinite Loop: Unveiling the En

I'm interested in creating a unique shape resembling the symbol of infinity using CSS, SVG, or Canvas. If you're unfamiliar with what an infinity symbol looks like, here's an example: https://i.stack.imgur.com/cLhBh.jpg So far, I've a ...

htmlcsssvgcss-shapes

Ensuring the text is positioned centrally and at the bottom of a table cell

Is there a way to center and align text at the bottom of a cell in table? This is my desired layout: ...

htmlcsscss-tables

What is the best way to place content in a single div without it being divided into several separate boxes

Here is my code snippet: <div class="col-md-9"> <div id="statbox"> {% for obj in product_type %} {% for obj1 in vastu %} <script type="text/javascript"&g ...

javascripthtmlcssdjango

Mobile devices cause CSS drop shadows to malfunction | Next.js

Update: After some testing, I discovered that this issue is specific to iPhones. When I tested it with an android device, everything worked perfectly fine. However, when I tried viewing the page on two different iPhones, it broke on both. This problem see ...

cssreactjsiphonemobilenext.js

OnePageCheckout may result in empty boxes being displayed due to OneStepCheckout CSS styling

Seeking advice for an issue with the Magento OneStepCheckout module. Upon checkout, there are three columns: customer data (working fine), payment options (selectable via checkbox), and details about the chosen payment method. Unfortunately, the informati ...

htmlcssmagentopaypalonestepcheckout

What steps should I take to resolve the "No such table" error in SQLite within Next.js?

Currently diving into the world of Next.js and faced a roadblock when attempting to pre-fetch data from a SQLite3 database. The dreaded "SQLITE_ERROR: no such table: post" error reared its head. Despite being confident in the existence of the table, runnin ...

sqlitenext.jsknex.js

How to preserve alternating row styles when exporting Angular Data Table to Excel with .withButtons?

Utilizing Angular DataTable to display a list of data, with alternate row background color and border styles defined. An issue arises when exporting the Data table to excel as the alternate row style and border styles are lost. Only the raw data is includ ...

cssangularjs

Encountering a CSS issue during the edit process with PHP and JavaScript

I'm encountering an issue when clicking on the edit button, as my data fetched from the DB should be displayed inside a text field. However, I'm facing a CSS-related error: Uncaught TypeError: Cannot read property 'style' of null Belo ...

javascriptphpcss

Setting a const value (true or false) based on the size of the window - a step-by-step guide

While studying, I encountered a challenge: In the code below, I need to dynamically set useState(false) based on the screen size. If the screen is larger than 947px, for instance, it should automatically be changed to true. The issue arises because sett ...

htmlcssreactjsnext.js

How can transitions be activated in Bootstrap 4 carousel?

Having an issue with my Bootstrap 4 carousel where I need to move 4 slides at a time. I have tried using the code below: $(this).carousel(4); However, the problem is that the carousel only jumps to that index without showing any transitions. Using $(this) ...

javascriptjquerycssbootstrap-4carousel

Display a horizontal progression indicator during the page download process

Occasionally, website pages may take a while to download without the user even realizing it. This can be problematic if the user clicks on an image or button with an event handler attached, as it may break the page functionality. To address this issue, I ...

jqueryhtmlcssprogress-bar