Codeforces
CF Step
Youtube Linkedin Discord Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Back to homepage
  1. Home
  2. /
  3. Projects
  4. /
  5. LeetCode Board
  6. /
  7. Resources : LC Board
  8. /
  9. Tailwind CSS and Shadcn/ui : LC Board

Tailwind CSS and Shadcn/ui : LC Board

  • Remove the default contents from page.tsx and make it look like this. Commit this code and push to Github. Use reference code from Tailwind Play. Tailwind Play Homage
  • Read about shadcn/ui and install it in your project by following the official documentation. Commit your code.
  • Remove the Tailwind Play background and make the page look like this in Light mode and Dark mode. Clicking on the moon/sun icon should switch the theme. Dark Light
    • Hint: The box can be created by reading and understanding the boilerplate code that you copied from Tailwind Play.

If you’re blocked, try to reverse engineer how the shadcn/ui website does these things. On the navbar, you will find a link to their github repo which contains the code that produced the website. First, we will download the github repo and bring up the shadcn/ui locally. To do that, clone the repo and open it in VS Code. Now, we need to look for the folder from which we can run the npm run dev command. If you look at our project, it contains a next.config.mjs. So, in the shadcn/ui repo, type Ctrl + P in VS code, and look for the folder that contains this file. It would be apps/www. Go inside this folder and run this command to install all the dependencies.

npm i

You might hit a certain error. Google about it and resolve it. Once done, run npm run dev from this folder, and the website would be accessible locally.

Once you’ve implemented the feature, commit the code, push to github, verify that your site works as expected on PC and mobile, and finally post on discord that you are done with the exercise (in a new thread, even if you already responded to the last thread).