Tailwind over everything. Mocking the iOS Weather app UI

This is why I will use Tailwind CSS for almost every project moving forward.

Brian Ruiz

· 6,084 views

Tailwind over everything. Mocking the iOS Weather app UI blog image

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 better.

Working 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 1

  • Reduce the size of your CSS files 2

  • Editing already existing styles feels safer 3

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 features 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.

Houston

71°

mostly cloudy

H:72° L:58°

1PM

67°

2PM

67°

3PM

67°

4PM

67°

5PM

67°

6PM

67°

Try tapping on me to switch theme.

One of the biggest advantages of using Tailwind CSS is its ability to speed up the development process. By using utility classes, Tailwind allows developers to quickly create and style components without having to write any custom CSS. I know what you're thinking - aren't utility classes just a fancy way of saying "inline styles"? While that may be true, Tailwind's utility classes are much more powerful than inline styles.

Additionally, Tailwind has built-in pseudo styles like hover, focus, and active (used above), which can be used to create more complex components, without leaving your TS or JS file.

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.

const WeatherList = () => {
  return (
    <div className="my-8 flex flex-col gap-2">
      {data.map((item, index) => (
        <CityCard key={index} data={item} />
      ))}
    </div>
  );
};
List component

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.

export default const CityCard = ({item}) => {
  return (
    <div
      className={`flex justify-between rounded-3xl bg-gradient-to-br text-white p-4 lg:px-8
      ${item.color}
    `}>
      <div>
        <p className="text-xl font-bold">{item.city}</p>
        <p className="text-sm font-medium mb-5 opacity-75">{item.time}</p>
        <p className="text-sm font-medium mt-auto">{item.state}</p>
      </div>
      <div className="flex flex-col justify-between">
        <p className="text-5xl">{item.temperature}°</p>
        <p className="text-sm font-medium mt-auto opacity-75">
          H:{item.temperature + 7}°
          L:{item.temperature - 7}°
        </p>
      </div>
    </div>
  );
};
Individual city component

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.

My Location

11:31 PM

Clear

63°

H:70° L:56°

New York

12:23 AM

Clear

52°

H:59° L:45°

London

12:23 PM

Rainy

44°

H:51° L:37°

Cairo

12:23 PM

Sunny

89°

H:96° L:82°

Overall, Tailwind's focus on reusable components makes it a valuable tool for any developer looking to create scalable and maintainable user interfaces.

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.

Instead, creating custom components using a utility-first CSS framework like Tailwind can be a better option, as it allows for more flexibility and control over the styling of the components. Overall, while UI libraries can be useful for smaller projects, it's important to consider the specific requirements and constraints of each project before making a decision on which approach to take.

Tags

  • Styling
  • CSS

Contact

Questions or need more details? Ping me on the community chat or reach me at brian@b-r.io I'd be happy to connect!

Newsletter

Get personal updates and readings on topics like tech, design, productivity, programming, and more!

Join the 0 other readers.