My Week with TailwindCSS: Overcoming Deployment Issues

Introduction

This was a fun week.

It isn't over yet; it's Friday, and I still have the whole day ahead, but I'm writing stuff down now.

This week, I worked on my Scrimba solo project from the React course. It was the second project, which involved creating a travel journal page using React.

I modified the given Figma design by adjusting some colours and refining the overall appearance to my preference.

The live link to my project: https://react-solo-project-travel-journal-kmc.vercel.app/

A screenshot of the page:

What I Learned & Explored

TailwindCSS

Tailwind CSS has become the go-to choice for quickly creating seamless and responsive designs using CSS. Responsive design is essential for creating any website.

Because I'm not proficient in CSS and wanted to learn more, I decided to challenge myself with Tailwind CSS. While using it, I explored numerous new features along with those I had previously used.

Extending Tailwinds defaults

Tailwind CSS includes default styles, which I find great. However, relying on the default colours can result in a lack of visual diversity, similar to other CSS frameworks. To address this, Tailwind CSS enables customization.

You can add new values to the tailwind.config.js file. This file allows for easy extension and modification. You can adjust colours, custom fonts, padding, and margin sizes and even create themes. I love themes.

I recently came across the context API in React during last week's review, so themes and creating them are at the forefront of my mind.

Typescript interfacing

Typescript is essential in today's development scene. Despite the many dramatic Typescript memes, it's here to stay.

For this reason, when I started the project, I decided I'd use Typescript. This meant that I'd have to learn to write and use an interface to create the map ()` needed to create the list of cards holding the data. The interface was needed because, in Typescript, you need to have types for anything to keep everything neat.

To do this, I had to set up a new .ts file in my project, define the interface, and assign a type to each value that existed in the object that I'd be pulling out using the map. It was interesting. I had no clue I'd need to do that when I began.

The errors I got when the map failed resulted in realising the need for an interface. My knowledge of Typescript and all the benefits it holds is limited—however, this one I liked. I'll be using Typescript more.

Real dev moment

I had a real development moment this week. When I was mildly satisfied with my project, I wanted to share it and be excited. 🥰✨✨ I failed to do this with one click.

Earlier in the project, I needed to make several changes to my ts.config file to use ShadCN UI components as per the documentation.

I then decided after having a hassle of a time with ShadCN that I'd rather not bother, removed it and then tried to deploy.

Oh god,- build errors!

The project failed to deploy on Vercel, leading me on an interesting journey.

Read the documents to solve a problem.

It's been my favourite journey all week.

Closing

It was, honestly, a good week. I got to work on more Scrimba projects plus I had a 100Devs lecture watch session, and I will be making a CRUD app next week to go with night and& weekends s5.

It's going to be a language-based app I think. I still have no idea.

But also, I'm done overthinking it all. 👋 That's my week.

Thanks for reading, and if you have any feedback, you can find me at X/Twitter: https://x.com/km_fsdev.ev