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 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 ¹

• Reduce the size of your CSS files ²

• Editing already existing styles feels safer ³

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.

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>
  );
};

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>
  );
};

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.

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.