Tailwind styles not applied in Netxjs project

Question

I am working with Tailwind CSS in a Nextjs project. I have tried a simple heading but styles are not being applied.

Here is my full code on GitHub: https://github.com/mennaElbadry70/TailwindCss_practice

• I have checked the tailwind.config.ts file but the paths should be correct.
• I have fixed previous errors regarding @tailwind base, @tailwind components and @tailwind utilities.
• I have installed the PostCSS extension in case that affects the Tailwind implementation.

Answer 1

I was in the same situation and I think it's the configuration in the tailwing.config.js file. you would have to change it so that it targets all the files in your workspace.

you have to change it from this

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

to this

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 2

You have a tailwind.config.js file which Tailwind will prioritize and use. This means your tailwind.config.ts is ignored. Consider either:

• Deleting the tailwind.config.js file so that Tailwind uses the tailwind.config.ts file
• Copying the config from tailwind.config.ts to the tailwind.config.js file and then deleting the tailwind.config.ts file.