CODEWITHSUNDEEP
reactjsnext.jsbrowser
woogabeen
woogabeen

Reputation: 33

classname not showing on nextjs

So I was working on Login page using next.js as framework.

I did some simple designs using react for some texts but it is not showing on browser. It may be that it is not imported.

I don't see any error on console so I'm having trouble with finding what the problem is.

browser

I can check on the inspector the classnames for these texts so I'm really puzzled why this is not reflected on the browser.

Does anyone know what the problem is or have had the same experience?

Thank you in advance.

the files looks like this: nav.js index.js _app.js

Upvotes: 1

Views: 610

Answers (2)

Kasetiya Yash
Kasetiya Yash

Reputation: 56

It is my belief that the problem lies with your Tailwind installation. Kindly verify that Tailwind is installed correctly. On occasion, issues such as this can arise due to an issue with the Tailwind configuration file (tailwind.config.js). If the content routes are not added correctly, it may work in some components but not others.

 content: [
"./components/**/*.{js,ts,jsx,tsx}",
"./widgets/**/*.{js,ts,jsx,tsx}",
"./shared/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./hook/**/*.{js,ts,jsx,tsx}",
],

Upvotes: 2

Saeed
Saeed

Reputation: 27

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Upvotes: 0

Related Questions