Why You Might Want to Consider Using Tailwind CSS for Your Next Website Redesign
The biggest problem my website had that I wanted to fix with a redesign was that it was not responsive.
What this means is that while my website can easily be viewed on mobile devices it didn't look great on them.
The padding, spacing, and general organization of visual elements, meaning whether elements should be shown vertically or shown next to each other horizontally, was not designed for mobile devices. That's something that needed to change.
As more and more people view content, especially websites, from mobile devices, a big part of modern website development is designing for mobile-first.
With that in mind, I had two options: I could continue designing my website using standard CSS or I could use an alternative CSS framework such as Tailwind.
I opted to use Tailwind specifically because Tailwind lets me think about developing my website's design in a more straightforward way.
When I think about designing my website and developing it using Tailwind, I think about how I want my website to look. When I think about designing my website using standard CSS, I think about how I need to connect my CSS to my HTML.
Instead of having abstract global CSS variables apply styles to my website that are located in a separate file from the HTML, if I instead opt to use tailwind, I can use a single HTML file to both design how my website looks as well as what content my website contains.
The result is a more connected front end development process.
I get my website to look exactly how I'd like and wind up actually designing something that looks better, not because Tailwind enables me to use more visual styling options, but instead because Tailwind’s process of development allows me to think more clearly about how its visual elements are structured.
In the end, I have a clean, easy to use, responsive website that looks good on both mobile and desktop devices.
More than that, I have an easily adaptable design that I can change without worrying about how each change affects the looks or functionality across the rest of my website.
A real life example and a tale of two frameworks
To show you how developing a website is different using Tailwind versus using standard CSS, here's a link card designed for PerfectingProduct.com and the code that's used to create it first using standard CSS and then using Tailwind: