nextjs tailwind setup, first pass at navbar

[HaNguyenB]

No description provided.

[amygtownsend]

Looking really great so far! Congrats to getting through the set up using two completely new frameworks you're learning (NextJS and Tailwind)! 🎉

Can't wait to see this project take off!

[amygtownsend]

I tried running npm install to install the dependencies you added, but I got this error:

do you get an error like this when you run npm install?

[HaNguyenB]

Oh I used --legacy-peer-deps for all. From what I read it's just because newer npm and React are not really compatible with many packages so that flag helps ignore older dependencies. I hope there is no repercussions for using it.

[amygtownsend]

Oh I used --legacy-peer-deps for all. From what I read it's just because newer npm and React are not really compatible with many packages so that flag helps ignore older dependencies. I hope there is no repercussions for using it.

Sometimes it's okay to do that, but it's important to see if the error has any merit to it first. According to the error, it looks like the version of the ESLint Prettier plugin you installed expects Prettier to have a version of at least 3.0.0, but you specifically installed version 2.8.8, following this Medium article.

The article recommended downgrading Prettier to 2.8.8 to avoid conflicting with Tailwind's sorting plugin, but it looks like that may no longer an issue. Can you try running npm install -D prettier prettier-plugin-tailwindcss to update the dependencies and let me know if you have any issues?

Update: I tried it on my end, and it's working! I actually only needed to run npm install -D prettier because prettier-plugin-tailwindcss was already up-to-date. If you'd like, I can push up a commit with the small change to the package.json

[HaNguyenB]

I also got a similar error.

[amygtownsend]

@HaNguyenB I got that error at first too. Try removing "prettier": "^2.8.8", from your package.json file (save changes), and then afterwards run npm install -D prettier. It should fix the error. 🤞

[HaNguyenB]

Yes it worked fine now! Thank you! How does it work on your end too?

[amygtownsend]

Here's my feedback on your second commit! Great work!

One additional note I have is that you may want to consider improving the contrast of the colors you used for your text and background. For accessibility reasons, it's important to have good contrast so that text is easy for everyone to read. You can use this official contrast checker tool if you'd like to know if two colors have good contrast.

[amygtownsend]

npm install worked for me with the updated dependency for Prettier, but Prettier is not formatting any files yet for me. I'm debugging it right now. Perhaps we can work on it together in our session today!