DEV Community

Cover image for A Cup of Tailwind CSS
Alvin Chui
Alvin Chui

Posted on • Originally published at alchui.one

A Cup of Tailwind CSS

As programmers, we love to simplify life. Tailwind CSS is a framework that is created to help programmers from writing a humongous amount of CSS loads while allowing us to style our design in HTML.

However, nothing is perfect. Just like drinking a cup of tea, some people may like Black Tea and some may prefer to drink Green Tea. The post may even be taken down if the author overlooks the idea of Coffee. So, let's not talk about tea and start evaluating the taste.


PROS:

One for All: It makes work easier because one doesn't need to switch between the HTML and CSS Styling. Everything can be done on one page.

Concise CSS Styling: CSS code is simplified into smaller blocks of "index" which can be used immediately in an HTML file.

Robust and Responsive Customization: Tailwind CSS is a responsive and mobile-friendly CSS Framework. It is also open source, providing freedom for customizations.

Others:

  • Great Community Support: The framework is developed by top-notch engineers. The code is constantly being maintained and updated.
  • CSS Power Up: One doesn't need to know CSS to use TailwindCSS.

Power Up Meme


CONS:

Verbose HTML Code: Due to the nature of having everything implemented together, codes may become difficult to read.

Example

Others:

  • Lack of Styling Components: Some people may want to structure their design in components. Tailwind CSS has a different design workflow.
  • Learning Curve: Some people hate to memorize vocabulary.

Summary

Great for writers, sad for readers


Secret Message

You can balance code's readability and coding efficiency by using Tailwind CSS only for styling such as hovering effects. Everything else (styling components, positioning, etc.) could remain the same.

Top comments (0)