Category: Tailwind

Posted on

Tailwind Update

A man getting blown away in a storm, her is trying to hold onto a windsock

I opted to try out Tailwind for my latest personal project. We (my wife and I) want our new App to have a more professional look than its sibling (less Boot strappy). I also wanted to try something new: enter Tailwind – below is my update.

So, the update, how is it going?

I’ve now used Tailwind in anger. I’m far enough into building the new App to provide an update on how things are going.

For someone who has used Bootstrap forever, there is a little to learn. You get nothing for free with Tailwind and what I mean by that is that you need to define everything, that is the point.

In Bootstrap you are using defined components, buttons, cards, everything has a pleasant default. When you copy the example for a card, it will have some nice padding, margins and fit with everything else. With Tailwind you need to define everything which is both a blessing and curse. Which it is depends on how you create your HTML and whether you have a vision of what you want.

I purchased a TailwindUI subscription which has been incredibly useful in helping me get started. If you are a solo developer and not that great at design, I recommend purchasing a subscription, you won’t regret it.

Components

I’m a huge fan of components, I’ve been creating reusable view components since the days of Zend Framework 1. If there is a chance I’m going to duplicate some HTML and it makes sense, boom, I create a component.

This approach works well with Tailwind. Yes, you need to define many more styles on an element, however, if it is all behind a reusable component that you define once, who cares?

If you tend to develop with the same framework, in my case Laravel, these days, the more components you create, the more components you will have for the next project. In the last four years I’ve created a substantial library of Bootstrap and Tailwind view components.

All Good?

I’m not done with the new App yet so my opinion of Tailwind may change but so far, yes, I’m very much enjoying it.

My biggest issue is having to context switch between Bootstrap and Tailwind. I have several personal and client projects which I support daily. Occasionally I run into an issue where I’m trying to use the wrong styles and wondering why it doesn’t work.

I might write another blogpost when I’m closer to release. At that point I should have hit more hurdles so should be able to provide a more detailed update on Tailwind.

Posted on

Tailwind, Have I switched?

A man getting blown away in a storm, her is trying to hold onto a windsock

I’ve never been much of a designer. I know what I like, and I can recreate any design a designer passes my way. However, producing anything original is incredibly hard.

I switched to Bootstrap many years ago. I switched because I needed a way to solve this problem, Bootstrap made it easy to create what I wanted. Additionally, it would also look OK – typically much better than ok.

Bootstrap sites typically look the same and before I go on, I don’t necessarily consider that a “bad thing”. The problem arises when you don’t want everything to look the same. Customisation is possible with Bootstrap, particularly version 5. However, it gets complicated quickly.

I’ve released three Apps in the last year. Two game scorers for Yahtzee and Yatzy and Budget, a free open-source budgeting App. The Apps all look ‘similar’, this isn’t necessary a problem because they all belong to the Costs to Expect service so it should be obvious that they belong to the same brand. However, I wanted something different for Budget Pro, an evolution of Budget.

Why not Bootstrap?

Budget Pro belongs to the same family as all the Apps I released this year but being the paid version, I wanted to differentiate it from Budget and give it a sharpened look. Due to its features, it will also have a more complex UI than Budget. As I was thinking about how to ‘improve’ the Budget design I decided to give Tailwind a go as everything I’ve seen of it has impressed me, particularly Tailwind UI.

Why Tailwind?

Two things pushed me over the edge. Firstly. Tailwind UI, having an extensive library of components to build with and from made it easy to get started and start building up ideas. Secondly, the standalone cli; I don’t want or need any additional dependencies and prefer vanilla JavaScript over any front-end toolchains.

I’m only a little way into my journey with Tailwind but so far, I’m loving it. Yes, you end up with lots of classes in the HTML. However, you know what each of them do based on the name and I create components to reduce duplication anyway.

We’ll see if the honeymoon continues as I move away from landing and content pages. It is when you get into the nitty gritty of creating the meat of Budget Pro things might go south.

I ‘ll make sure to post a Tailwind update when I am further into the development of Budget Pro.