tailwind css styles not applying

[shafahad09]

I installed the tailwind css as said in the video still when I use the class name the styles are not getting applied. Please solve this issue for me

[jamcmich]

Hey @shafahad09 👋,

The problem is most likely in your tailwind.config.js file. I'm not sure what your project's configuration is but here's a quick checklist:

Dependencies

• Confirm your package.json has the correct dependencies by copy/pasting the configuration from JavaScript Mastery's package.json configuration file

TailwindCSS

• Install TailwindCSS and its peer dependencies using the following: npm install -D tailwindcss postcss autoprefixer
• Run the init command to generate both tailwind.config.js and postcss.config.js: npx tailwindcss init -p
• In your tailwind.config.js file, copy/paste the configuration from JavaScript Mastery's tailwind.config.js configuration file
• Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.
• Run your build process with npm run dev
• Start using Tailwind in your project:

  export default function Home() {
  return (
  <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
  )
  }

[amlabsinc]

Ran into same problem after creating the navbar. I fixed the problem by creating the project over. First installing nextjs, then installing tailwindcss with the Gist for the tailwind.config. Then I installed sanity. The problem was the file directory for the tailwind. Atleast that was my issue, but after that it worked fine

[chavanrahul23]

I also had same issue, try using this in tailwind.config.js content: [ 'src/pages/*/.{js,ts,jsx,tsx}',
'./components/*/.{js,ts,jsx,tsx}', ],

[Alea-Tennu]

The issue I've got is that my videos component isn't displayed on the screen even though I've followed everything in the video. But I think I know where the issue is from, just don't know how to resolve it Any help will be much appreciated 🙏🏼