My Approach to Learn Tailwind CSS and New Things
Tags: learning, tailwindcss, webdev, css
Published: 2024-02-03 13:27:47

(The inspiration for this came from a video by [Theo](https://www.youtube.com/@t3dotgg): [Your Goals Kinda Suck - LEVEL UP As A Developer](https://youtu.be/rzwaaWH0ksk?si=Psjeh9ab974tNvXu) I thought the way he illustrated it was really cool and coincidentally it was very similar to what I do, but I had never seen my thoughts illustrated like that.)

---

The daily life of a programmer, whether they are a beginner or experienced, is marked by the continuous learning of new tools and technologies. This fact is well-trodden ground in our field, and I don't intend to delve too deeply into it.

What I propose with this article is to show how I go about learning a new technology, using my recent experience with Tailwind CSS as an example. I'll discuss the means, content formats I prefer, and paths I choose from the myriad options available on the internet.

## What is Tailwind CSS

Tailwind: for many, it's a step backward; for others, it's progress.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6urkdpcx5v9irlupoau.png)

CSS is difficult. At the beginning, in smaller projects, it may be easy to write and create new things, but as the project grows, the complexity of CSS increases, and things can get a bit messy.

In general, Tailwind is nothing more than a compilation of utility classes that can be used together to compose the style of a component. This way of writing CSS keeps pace with the evolution of the web, which has a much more recent history than programming in general and undergoes frequent changes and evolutions.

This article will not delve too much into the technical specifics of Tailwind. For that, I suggest a series of tweets from [Cory House](https://twitter.com/housecor):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmqw9i7fx23gng38r6p9.png)

## Hands-on

With the introductory part out of the way, let's move on to where I want to show the approach I take when learning a new technology.

There are two points I like to consider:

- What's the motivation
- Where I want to get

These two points are important because they provide direction and the necessary motivation to start. So let's understand a bit more about these two points:

## First point: What's the motivation

The motivation to study Tailwind CSS came from work-related reasons. The team decided to use it in a new project, and that's more than enough motivation for study.

This is a very specific case where the demand exists. I need to study to deliver quality and efficiency to the company I work for.

First point check ✅, let's move to the next.

## Second point: Where I want to get

This point often causes the most indecision and is where people most often fail when defining a study plan. Goals should be achievable and tangible. In another article of mine, "[What failing in my habits taught me](https://lucaschitolina.medium.com/o-que-meses-falhando-em-meus-h%C3%A1bitos-me-ensinaram-f9d9591a55ed)" I pose the following challenge about being a reader:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vswaetvk11p0vj3pnv7z.png)

In this case, things are no different. It's very vague to define a goal as "Learn Tailwind CSS." Where does this lead? What will you be when you learn? How long will this take? A lifetime?

The problem with a goal like this is that you can't draw clear plans; the path becomes vague, and your chances of giving up in the middle of the process significantly increase.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5m39tr9k95abzqx7uyo.png)


Think of the illustration above as the circle being a barrier, a stage you must reach. This stage is learning Tailwind. There is a path to reach this stage. In fact, there are many paths.

## There are many paths

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wun1i9c4p483lhda2ln8.png)

This might be a bit cliché but it's important to say again. Without clear goals of where you want to go, the paths become tortuous, and often you don't reach them because you got lost along the way.

## Defining a tangible goal

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/980zymnlmx6u1es0xvsn.png)

To avoid this, I needed to define a more realistic goal. I switched "Learn Tailwind CSS" to "be able to apply Tailwind in a project" (remember the comparison with becoming a reader vs reading books). The four points from the image were as follows:

1. Understand what utility classes are
2. Understand the main differences of Tailwind and how to use my current knowledge of CSS
3. Write code (!!!)
4. Deepen knowledge in videos, documentation, and more code.

Thus, I achieved my goal, managed to learn Tailwind to apply it in a project, and am now ready to work on my company's project with quality and efficiency.

There will be more circles

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6fwcd40e1642yfgljvw.png)

However, the journey doesn't end there. I can't say that I know everything about Tailwind, nor that I can get by in day-to-day life without consulting anything. That would be lying to myself. The learning will continue, other circles and goals will come, and the process will become easier, more natural, until the next technology comes along.

And this sums up the life of a programmer, a constant sequence of seeking learning and updating. 

Please share your thoughts in the comments on this topic. It will be great to discuss and see different opinions and perspectives

Until the next contents👋

## Channels, references, and content that helped me:

- https://www.youtube.com/@frontendfyi
- https://www.youtube.com/@samselikoff/
- https://www.youtube.com/@TailwindLabs/
- https://tailwindcss.com/
- https://twitter.com/housecor/status/1616065927912591360
- https://www.builder.io/blog/the-tailwind-css-drama-your-users-don%27t-care-about
- https://www.youtube.com/watch?v=mr15Xzb1Ook&pp=ygUSZmlyZXNoaXAgdGFpbHdpbG5k
- https://www.youtube.com/watch?v=lHZwlzOUOZ4&pp=ygUSZmlyZXNoaXAgdGFpbHdpbG5k
- - https://www.youtube.com/watch?v=pfaSUYaSgRo&pp=ygUSZmlyZXNoaXAgdGFpbHdpbG5k