Yani's Portfolio

After such a smooth and enjoyable experience building my [portfolio](https://yaniportfolio.netlify.app/) with React, TailwindCSS, and Sanity using this [tutorial](https://www.youtube.com/watch?v=NO7_jgzVgbc), I thought it would be as easy to implement it to make an existing Vanilla JavaScript app responsive. Boy, was I wrong! It's definitely easier to work on making an app responsive as you build it versus making an existing app responsive. One other very useful tip is, it would be helpful to **be fluent in CSS first before dabbling in TailwindCSS**.

![Depositphotos_451713306_XL.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1642365263906/_2pyrDvhd.jpeg)

I had the fortune of being selected as a fellow to work at an awesome startup called [Tally Up](https://gettallyup.com/) for a couple of months to help work on making their app responsive using TailwindCSS. Tally Up gives powerful data analytical insight into progressive political campaigns and has such a hardworking team of four behind it that so generously took me, and two other fellows, under their wing.

At first, I had tried my hand at making the app responsive using CSS alone, which involved mostly adding media queries, and making minor adjustments that worked initially, but I had to scale back because I had gotten too carried away and wasn't able to get the logo and logout elements in the header to follow suit. I used this [tutorial](https://www.youtube.com/watch?v=ZYV6dYtz4HA&t=1s) which was really helpful.

I then reverted all the changes back and started with clean sleet. There are so many options out there to choose from. Like Bootstrap, Material UI, etc. My fellow Flatiron School alumni, Jessi B., gave the best analogy that might help determine which framework might be suitable for your project.

## "Bootstrap and Material UI are more like buying premade clothes. Tailwind is more like buying materials - zippers, and buttons. CSS is more like building zippers, weaving and dying your material, designing each item, sewing it all from scratch."

Seeing that I'm working on an existing app that already has a set design and presentation, I thought Tailwind would be the most suitable to apply to coincide with responsive development.

First off, you would need to install Tailwind to your current app following their **Get Started with Tailwind CSS** [documentation](https://tailwindcss.com/docs/installation). I then duplicated the CSS file to stub the utilities into it:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

This is probably where I was met with my first roadblock. Should I have added the above utilities to the custom CSS file, or have it in a new file on its own? If you may face any such obstacles, there is a [community on *Discord*](https://discord.com/invite/7NF8GNe) that could help. Although, I wasn't able to find my solution here. @[Chris Sev](@chris-sev) even mentioned at 4:26 in his [tutorial](https://www.youtube.com/watch?v=NRagrTU_v8o&t=276s) on *Traversy* that, "There is a barrier to entry when starting with Tailwind".

Once installed, this [doc](https://tailwindcss.com/docs/responsive-design) is really handy when you want to focus on responsive development using Tailwind.

While searching for resources, I also came across these helpful sites:

- Tailwind [Cheatsheet](https://nerdcave.com/tailwind-cheat-sheet) by @nerdcave
- [Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) by Chris Coyier
- [Tailwind Starter Components](https://www.tailwindtoolbox.com/starter-components)
- [3 Ways To Implement Responsive Design In Your React App](https://itnext.io/3-ways-to-implement-responsive-design-in-your-react-app-bcb6ee7eb424)
- [You Probably Don't Need Media Queries Anymore](https://dev.to/kathryngrayson/you-probably-dont-need-media-queries-anymore-a4j?signin=true)
- [Understanding pixels and other CSS units](https://webplatform.github.io/docs/tutorials/understanding-css-units/)

I've had some feedback that it would be easier to convert the existing Vanilla JavaScript app to React first, so you can do this if you want to give that a whirl. You can follow the doc [here](https://reactjs.org/docs/add-react-to-a-website.html).

Overall, it really is a good real-world experience to be able to work with someone else's code and familiarize myself with it so I can attempt to modify it. I would love to know your thoughts about implementing Tailwind into your projects!

*Original post*