What is the procedure for incorporating custom fonts from Google Fonts into Tailwind CSS?

https://i.sstatic.net/99gpe.pngI tried following the steps from a YouTube tutorial, but I am unable to apply the font family "nunito." I inserted the @import code into the CSS file located in the "src" folder and executed "npm run (script name)" in the terminal, but unfortunately nothing seems to be working.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        nunito: ["Nunito"], // ! investigating why the specified font family is still not showing up in the styles.css within the public -o output folder.
      },
      colors: {
        // ADDITIONAL COLOR STYLES HERE
        primary: "#FF6363",
        secondary: {
          100: "#E2E2D5",
          100: "#888883",
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Answer №1

According to the documentation provided, there may have been an incorrect declaration of the key; the single quotes for the Nunito key were missed. The correct declaration should be: 'nunito': ['Nunito'].

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

Utilize JQuery variables for toggling the visibility of various DIV elements

On my webpage's splash page, there are 4 divs but only the home div is initially visible. The other three are hidden. Each of these divs has a button associated with it that triggers a jquery click event to swap out the currently visible div for the ...

Modifying the Vue.js Vue3-slider component for custom color schemes

Currently, I am using the vue-slider component and would like to customize the color of the slider itself. The specific class that needs to be styled is "vue-slider-dot-tooltip-inner". Below is a screenshot displaying the original CSS styling for vue-slid ...

What are the steps to incorporate fading effects into a jQuery popup box?

Currently, I have implemented a jQuery function to display a popup box using .show() and hide it using .hide(). Is there a way to incorporate charming animations such as fading into the popup box? // display pop up $('.mypopup').show(); // con ...

What could be causing the hover effect to malfunction in this code snippet?

I have been working on creating a hover effect for a list of items where an underline emerges from the center. While I have done something similar in the past, there seems to be an issue preventing it from working properly this time. I have included the HT ...

Retrieve the border color using Selenium WebDriver

Hey everyone, I'm currently trying to retrieve the border color of an extjs 4.2 form control text field using the getCssValue method. However, I'm having trouble getting the value as it's coming back blank. Below is a sample of my code that ...

Cursor hovers over button, positioned perfectly in the center

I am facing a challenge with implementing a hover function for a set of buttons on the screen. The goal is to display the mouse pointer at the center of the button upon hovering, rather than the actual position of the cursor being displayed. I have tried u ...

The Bootstrap dropdown menu unexpectedly appears in front of the panel located above

Having trouble with the Bootstrap dropdown panel. My web page has 4 main panels, each containing additional bootstrap panels. When I open one panel at a time, everything works fine. However, when I try to open multiple panels simultaneously, the positions ...

Is there an issue with the padding not functioning correctly on smaller and medium-sized devices when using Bootstrap

On my desktop, I added '50px' padding to the body of my page and it's working properly. However, on smaller and medium screens, it's not functioning correctly. I tried using Bootstrap @media CSS functionality, but it still doesn't ...

Creating a specific type of table using Ruby on Rails

Is it feasible to create a table with two columns, where the left column incorporates multiple rows with a scroll bar, and the right column contains a large box housing buttons that alter based on the selection of blocks in the left column? ...

Minimize the amount of space between two heading elements

Is there a way to decrease the distance between two heading tags? I want the h2 tag to be nearer to the h1 tag. Here is the CodeSandbox link for reference: https://codesandbox.io/s/rough-framework-tsk5b ...

Make the inner div within the td stretch to cover the entire height of the td

Inside the first tds, there is dynamic text content that automatically expands the trs and tds. However, the second tds have a div with a background image but no text inside. I want these divs with background images to expand or collapse along with the tab ...

What advantages does utilizing multiple classes in HTML provide?

Programming is still a new world for me, and I'm struggling to understand the purpose behind using multiple classes in HTML. While it seems like whether we use one class or several, the CSS styles will apply to the same content or text anyway. So why ...

Child element does not follow z-index rules

I have a website Suoi Hong Resort However, the menu block displays behind the logo. The navigation class has a position of absolute and a z-index of 3. The logo has a position of absolute and a z-index of 2. The menu block has a z-index of 10. Despite th ...

Why does using rgba color with an alpha value cause my div to become see-through?

I am currently attempting to assign a background color to a specific style of pop-up, but whenever I use a value that includes an alpha channel, it ends up being transparent. This is the CSS code I have been using: --color: 255, 144, 106, 0.18; background ...

Guide to Re-rendering a component inside the +layout.svelte

Can you provide guidance on how to update a component in +layout.svelte whenever the userType changes? I would like to toggle between a login and logout state in my navbar, where the state is dependent on currentUserType. I have a store for currentUserTyp ...

Utilizing Next.js Image Component to Apply CSS for Width and Height Settings

Currently, I am utilizing the Image component provided by Next.js, which requires setting specific width and height values. To address this, I am incorporating Tailwind CSS utility classes to establish the desired dimensions. https://i.sstatic.net/A28fB.j ...

Unable to render markdown properly in NEXTJS

Hello there! I hope you're having a wonderful day. I'm currently in the process of learning about Markdown with React. I've successfully used a React Markdown editor, but now I'm facing some challenges when it comes to displaying the c ...

Ways to prevent websites from switching to landscape mode

Is there a way to prevent landscape mode on my website and restrict users to portrait mode, especially for devices with screen widths below 777px? I have custom headers that take up fixed position space of around 100px on the screen. If it is possible to ...

Managing the intersection of div elements

Can someone help me make the inner part of the red circle white, overlapping with the blue circle and transparent for the rest to reveal the green color underneath? If anyone has a solution, I would greatly appreciate it. #bigCircle { display: flex ...

Conceal the scrollbar track while displaying the scrollbar thumb

Hey there! I'm looking to customize my scroll bar to have a hidden track like this. Everyone's got their own style, right? ::-webkit-scrollbar{ width: 15px; height: 40px; } ::-webkit-scrollbar-thumb{ background-color: #DBDBDB; borde ...