Enjoying front-end design with Tailwind

I started building an employee engagement survey tool two months ago. The basic product is now ready and I am in the process of finding more customers to try the service. I have two goals with this project: (1) grow quickly, and (2) improve as a programmer.

The front-end of the service consists of three parts, all of which are viewed in a web browser:

1. Survey app, which the employees see
2. Dashboard app, which the managers see
3. Website, which anyone can see

I started with the survey app. I emphasized keeping it as simple as possible, to get something working as a Minimum Viable Product. I ended up going through the following steps:

1. Design everything in Sketch
2. Make it work in the browser by using only HTML and CSS
3. Use vanilla JavaScript for the functionality
4. Add libraries where I needed more interactivity

Initially, I tried to use a front-end framework to create the survey app. I wanted it to have an „app-like“ feel, primarily through instant navigation between questions. I had read a lot about Svelte and am very impressed, so it was my first choice.

This did not work well, however. The learning curve was a bit too steep for me and I ended up spending a couple of days trying to make the simplest things work. As the survey app was supposed to be simple, I finally decided to ditch all frameworks and get the instant navigation effect by hiding and showing different sections with JavaScript.

Choose right level of abstraction

My takeaway is that I went one level of abstraction too high for my needs on this project. There was no reason to use a framework when the only thing I was really looking for was instant navigation, which was much simpler to implement myself.

In another case, however, I remained at one level of abstraction too low. This was the case of CSS. Despite the survey app being very simple, the CSS file quickly got out of hand. It now contains over 500 lines of code, I have no idea what half of the styles do, and I dread opening it every time I need to change something.

The downside of this is that I have made brittle software. If I need to change the design of the survey app, I risk breaking something so I am afraid of making changes that would improve it.

A new solution to styling

Clearly, I needed a different approach when it came to styling the other parts of the service. I used Bootstrap on most projects before, which would clearly be better than plain CSS, but I never really loved it. So I searched for other solutions.

I ended up choosing the Tailwind CSS framework. It works similarly to Bootstrap, allowing one to escape editing CSS files by adding pre-designed utility classes to elements in HTML files. But the design looked better and I wanted to work with something I liked, so I decided to switch things up.

This ended up being the best tooling decision I made. Tailwind has been a joy to work with and is very flexible when I need to make changes. In fact, I did not create a single CSS file for either the dashboard or the website, both of which are much more complex than the survey app!

This would have been enough to make me happy with the decision, but the creators did even better and offer pre-designed components called Tailwind UI. This product has saved me countless hours of work, and more importantly, it enables me to build a more beautiful product than I could have myself.

Overall, this part of the project has been rewarding. I am now much more capable as a builder of front-ends than before, and I enjoy the process more. Tailwind enabled me to achieve both of my goals on this front: the design is already impressing potential customers, and I improved my skills at the same time.

Newer: Remapping keys on macOS