Why start using TailwindCss in 2021

Leonardo Tononi — Sun, 11 Apr 2021 18:00:13 +0000

Hi, this is Leonardo.

I'm a simple human that tries to improve day by day, step by step. If it’s your first time here you can read who I am in this blog post “Who am I”, otherwise skip this part.

Introduction

From their website we understand that TailwindCss is a utility first css framework. It allows us to write our style directly in the html. “Yes OK” you will say “but I have a thousand of questions!” Don’t worry, in the article I will try to answer everything you should evaluate to see if it is a right fit for your needs.

What it is and what are the advantages?

Let’s get straight to the point. Why bother learning this new way of writing CSS? Well I’d start by saying it’s fucking fast! What do I mean by fast? Imagine no longer having to create separate files for component markups and its styles. Imagine no longer having to think of names for “Wrapper” or “WrapperOfWrapperOfWrapper”. Not having to continually import or export css variables. Imagine you can do it all in one line.

Imagine being able to copy and paste entire structures of components already created by someone else, where you can apply your personal style in the blink of an eye. Imagine being able to focus primarily on creating the logic of your application.
That is Tailwind.

Why is it better than others?

I have never really tried other css frameworks in the same way I tried Tailwind. But what I can tell you is that while others have a more defined and less easily customizable style, with tailwind everything remains in our hands, but at the same time it allows you to have a good level of predefined style guidelines.
So if you are like me, you don’t have a strong knowledge of design, you can still create beautiful applications or web pages without compromise the unicity of your style.

A site created with tailwind is difficult to detect at first sight, on the contrary the sites created with other frameworks have a more marked and recognizable imprint.

I want to show you some example of what triggered my curiosity.
Below an example of an easily integrated dark mode:

// tailwind.config.js
module.exports = {
  darkMode: ‘medium’,
  // …
}

<div className=“bg-white dark:bg-gray-800”>
  // .....
</div>

Not to mention the media query, which can be integrated with a simple "md: text-white" to say "@media (min-width: 768px) {…}".
In my humble opinion this is really cool and everything is so easily customizable.

Also, most Tailwind projects ship less than 10KB of CSS to the client.

Why not just use CSS?

Because Tailwind requires a minimal learning curve and the documentation it’s really well done. Over time, it will make the creation of projects much easier and faster, without having to leave behind the flexibility of pure css.

Furthermore, once you have decided to create a project with tailwind, it will always be possible to apply other types of css, like styled components.

Recap

Speed up the creation and the design of any project
Allows you to raise the bar of your style
You can say goodbye to having to create fancy names for your components or Css variables = Easy
Highly customizable
Dev friendly, covers the real needs that a developer may have in 2021

EXTRA: some useful FREE resources

8 Tips on how to improve your day as a developer.

Leonardo Tononi — Thu, 25 Feb 2021 15:19:22 +0000

Hi, this is Leonardo.

I'm a simple human that tries to improve day by day, step by step. If it’s your first time here you can read who I am in this blog post “Who am I”, otherwise skip this part.

What is this post about?

Eight simple tips on how to structure your work day and your free time and why it matters.

What can you do?

Don’t over plan, thinking small and simple is the key to success. For example, trying to accomplish from 3 to 5 important tasks is enough. You are not running a sprint, it’s a marathon.
Only plan the week ahead of you, long term plans are not good because it’s hard to stick to them. Again, you are not running a sprint, it’s a marathon.
Choose something rewarding to do, but remember it is better to privilege healthy activities.

Exercise, interestingly, also helps new neurons survive. Exercise is by far, more effective than any drug on the market today to help you learn better. It benefits all of your vital organisms, not just your brain.
Try to stay focused when working, it's better to spend less time concentrating while ensuring quality, than spending longer and more distracted hours working. Remember that every time you are distracted from your main task, it costs you more effort to return to the previous focused state.
It is better to avoid your smartphone while working / studying. I suggest using your phone time like a reward after ‘x’ time spent focusing. Also try to put your mobile phone in ‘do not disturb’ mode, it helps.
Be clear with yourself with what you expect and want from your day. My suggestion is to write it down, and it doesn't matter if it’s on a paper or on a display, it’s useful to vacuum your mind from distractions.

At the moment I’m using a minimal calendar app that keeps out noise that other calendar apps have, it’s called Teux Deux.
Sleep is an important part of your learning and memory process. Sleep has also been shown to make a remarkable difference in your ability to figure out difficult problems and to understand what you're trying to learn.
As always, drink more water.

Conclusion.

What is key is that you need to prioritize and organize what matters to you, and then try to stick to your goals or, at least, try to follow a kind of plan.

Sometimes it could become too hard to follow, but this is also normal, don’t worry and don’t be stressed about it.

I'm new to this kind of blog post stuff, and I'm not an English native speaker, therefore I'm trying to keep everything simple.

If you think I can improve this post I would be happy to see a comment from you on Twitter.

Thanks a lot and see you around 🙃.

DEV Community: Leonardo Tononi