Search code examples
next.jstailwind-css

tailwind css not working properly in nextjs

I am working with tailwind in Next.js and I create the environment using this command: npx create-next-app --example with-tailwindcss with-tailwindcss-app

Everything works fine except one thing

  • I am using breakpoints on <span/> tag if I use all breakpoints except default(xs) then my design works fine but if is use default breakpoint with other breakpoints then the default/xs applies to every other breakpoint.
 <span className=" text-xl text-red-500  sm:text-blue-500 md:text-indigo-500 lg:text-violet-500 font-semibold  "> Hy, I am </span>

In my code text-red-500 applies to every breakpoint

I know my syntax is correct, but somehow there is a problem in loading my CSS files and I don't have any idea which files should I have to target.

everybody's opinion is acceptable

I have also attached some of the files in my project.

tailwind.configpackage.jsonglobal.cssapp.js

Solution

  • In my case the problem was, that i had wrong paths in tailwind.config.js:

    Before:

    module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
}

    Fixed:

    module.exports = {
  content: ["./src/pages/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
}

    You should specify a path relative to tailwind.config.js