styles are not being applied to component

[VenomFate-619]

I am developing the application using the nextJs 13 app directory.

styles for button components are not being applied to it.

the classes are not loaded for it in the stylesheet

code:-

import Link from 'next/link'
import React from 'react'
import { Button } from 'src/lib-components'

const Hero = () => {
  return (
    <section className="overflow-hidden bg-[url('/images/banner.png')] bg-cover bg-top bg-no-repeat flex items-center h-[500px]">
      <div className="container-padding px-4 md:py-12 lg:px-16">
        <div className="">
          <h1 className="text-4xl font-bold text-black sm:text-3xl md:text-5xl lg:text-6xl">
            The Interview Vault
          </h1>

          <p className="max-w-lg text-black font-light  md:text-xl md:leading-relaxed">
            Your Source for Real Experiences
          </p>

          <div className="mt-4 sm:mt-8 md:space-x-5 space-y-2">
            <Link href="#">
              <Button className="bg-[#030303] font-semibold text-lg rounded  drop-shadow-drop1 text-white focus:outline-none">
                View Experience
              </Button>
            </Link>

            <Link href="#" className="md:inline-block hidden">
              <Button className="bg-gray2 rounded  font-normal text-lg drop-shadow-drop1 text-[#030303] focus:outline-none">
                Add Experience
              </Button>
            </Link>
            {/* <a href="" className='underline text-lg' >Add Experience</a> */}
          </div>
        </div>
      </div>
    </section>
  )
}

export default Hero

lib-components

'use client'
import { Button } from '@material-tailwind/react'

export { Button }

I am also using the navbar from the package , it is working fine

[kenzaflow]

The same happens for me!

[kenzaflow]

change the title to "styles are not being applied to component"

[wish9919]

Having the same issue, when using next.js. Some of the classes do not apply to the CSS.

This is a Select component.

[edikamy]

Same issue

[thehashton]

Can confirm this is still happening, no default styling are applied to say for example a <Button /> component even through the props/variants/colours have been filled.

[kenzaflow]

Can confirm this is still happening, no default styling are applied to say for example a <Button /> component even through the props/variants/colours have been filled.

I haven't used this thing in a long time, I think you have to add the library from node_modules to tailwind.config.x, like:

content: [
 "src/**/*",
 "node_modules/@material_tailwind_idk/**/*"
]

[dd-mahn]

I had the same problem and found the solution in my tailwind.config.ts file. Initially, my config for tailwind and material-tailwind was like this:

/** @type {import('tailwindcss').Config} */
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: "selector",
theme: {
},
variants: {
extend: {
fontSize: ["responsive"],
},
},
plugins: [],
});

After I modified it, it seemed like the purge property must be changed to content. Here's my final config (changed from tailwind.config.js to tailwind.config.ts):

import type { Config } from "tailwindcss";
const withMT = require("@material-tailwind/react/utils/withMT");

const config: Config = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
darkMode: "selector",
theme: {
},
variants: {
extend: {
fontSize: ["responsive"],
},
},
plugins: [],
};

const withMTConfig = withMT(config);

export default withMTConfig;

After this modification, all the components of material-tailwind worked fine for me.