Tailwind over everything. Mocking the iOS Weather app UI

Tailwind CSS is a utility-first CSS framework that has taken the web development world by storm. It has quickly become a go-to choice for developers who want to streamline their CSS workflow and build websites faster. If you're not already familiar with Tailwind, you may be wondering what all the fuss is about. In this blog, we'll explore some of the key benefits of using Tailwind CSS as well as some of the drawbacks of more traditional approaches to CSS development. By the end of this post, you'll have a better understanding of how Tailwind can make your development process more efficient and effective, and why it's quickly becoming a must-have tool for web developers of all levels.

Let's Talk about DX

In design, there's User Interface, User Experience, and Human Interface (as Apple calls it), but let's not forget about the Developer Experience. Tailwind is a great example of a tool that makes the developer experience betterWorking with CSS files that go unused can be a frustrating experience for developers. When a CSS file contains styles that are no longer used in the project, it can make it difficult to find and update the styles that are needed. in the long run. Here are a couple key points to consider:

Less time thinking of funky names

Reduce the size of your CSS files

Editing already existing styles feels safer

1 - Tailwind helps you save time and effort by eliminating the need to create unique class names for every element in your UI. You no longer have to struggle to come up with abstract or irrelevant names such as "sidebar-inner-wrapper" or "content-container".

2 - making it easier to manage and maintain. Unlike traditional CSS, where you need to create new stylesheets for every new feature, Tailwind's utility classes can be easily reused throughout your project, significantly reducing the need to write new CSS code.

3 - because classes are local to the HTML elements. With global CSS, any change you make can have unforeseen consequences elsewhere in your project, but with Tailwind, you can make changes with confidence, knowing that you won't accidentally break anything.

Looking forward

On the bright side, we're starting to see more and more tools prioritizing the developer experience. This is a huge plus for us developers who want to focus on building slices and functionality, rather than spending hours trying to figure out how to style a component.

Speed and Efficiency

Check out this iOS weather widget. I was able to create this component in less than 5 minutes, which would have taken me much longer if I had to write the CSS and having to switch between files.

The Power of Reusable Components

One of the key advantages of Tailwind CSS is its promotion of reusable components. Which is now a standard in the front-end world. By using pre-defined classes, Tailwind allows developers to create reusable components that can be easily used throughout the codebase.

1const WeatherList = () => {
2  return (
3    <div className="my-8 flex flex-col gap-2">
4      {data.map((item, index) => (
5        <CityCard key={index} data={item} />
6      ))}
7    </div>
8  );
9};

Continuing with the weather theme here, let's create a reusable card component that can be used to display the current weather for a list of cities. With Tailwind, you can style your HTML elements without having to write any CSS rules. This can save you a lot of time, especially if you are working on a large project. Then when you need to reuse this, you don't have to go look for the styles.css file and copy it to a new location.

1export default const CityCard = ({item}) => {
2  return (
3    <div
4      className={`flex justify-between rounded-3xl bg-gradient-to-br text-white p-4 lg:px-8
5      ${item.color}
6    `}>
7      <div>
8        <p className="text-xl font-bold">{item.city}</p>
9        <p className="text-sm font-medium mb-5 opacity-75">{item.time}</p>
10        <p className="text-sm font-medium mt-auto">{item.state}</p>
11      </div>
12      <div className="flex flex-col justify-between">
13        <p className="text-5xl">{item.temperature}°</p>
14        <p className="text-sm font-medium mt-auto opacity-75">
15          H:{item.temperature + 7}°
16          L:{item.temperature - 7}°
17        </p>
18      </div>
19    </div>
20  );
21};

So what? This approach not only makes development more efficient but also ensures that the UI is consistent across the project. Additionally, reusable components can be easily updated and maintained, reducing the amount of duplicate code and improving the overall quality of the codebase.

What About Other UI Libraries?

While there are many UI libraries available, from my experience, I always found myself overriding the default styles of the library to match my project's design language. UI libraries can be a great choice for small projects where you want to quickly create a functional and visually appealing user interface.

However, at scale, you typically have branding and a company design language that you want to follow or set forth. In these cases, using a UI library may not be the best approach as it can be challenging to customize the styles to fit your branding and design requirements.