css Question posted in
Some basic documentation can be found here.

Css – Tailwind styles not applied in Netxjs project

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.
Tags:

2

Answers


  1. 0

    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.
    Login or Signup to reply.
  2. 0

    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: [],
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search