Manage - Landing page

Built as a practice project to learn tailwind css following a tutorial on youtube by Brad Traversy.

Brad Traversy is the founder of Traversy media, a youtube channel that provides vast number of tutorials, crash courses and many more educational content focusing on web development.

The designs are from a frontend mentor challenge

Frontendmentor is a platform offering, some free and paywalled professional designs for frontend developers to create stunning projects.

View my list of all solved Frontementor challenges here

Clone this?

Follow these steps if you want to clone this and play around with the code.

1. pnpm i if you want to use some other package manager like yarn or npm, delete the pnpm-lock.yaml file before doing so.
2. Start tinkering.

Steps followed

1. pnpm init
2. pnpm i -D tailwindcss
3. pnpx tailwindcss init >> produces tailwind config.
4. In tailwid config, content: ["./*.html"] which means all the html files in root dir are the ones where tailwind is being utilised. If there are some other paths where tailwind is being utilised add those to the array as well.
5. import tailwind

/* file: input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

6. Create npm scripts to watch for changes, and for the build task.

"build":"tailwindcss -i ./input.css -o ./css/main.css"
"watch":"tailwindcss -i ./input.css -o ./css/main.css --watch"

Useful resources

• Tailwind CSS docs
• pnpm docs
• Guide for NPM scripts
• Crash course on Tailwind CSS by Brad Traversy on Youtube.