TailwindCSS - What it is & How to Get Started with Visual Studio Code

TailwindCSS - What it is & How to Get Started with Visual Studio Code
Daniel Esteves

Daniel Esteves

February 14, 2021

6 min read

––– visits

Si estás buscando la versión en español

Entra aquí

What is TailwindCSS?

Tailwind is a CSS framework that is based on providing utility classes with which we can build any interface, make them unique and at the same time learn CSS while we are writing the classes.

With this also gives us the possibility to create our own reusable components, imagine a button which will be our base with a specific padding and a specific font and size but will change color when we use it for example in save buttons (green or blue), cancel (usually gray) or delete (red); then we call our component and with a class, for example bg-red-500 we change the color and still have the same initial aesthetics.

This helps us above all to be more agile while we are developing a project, since we are a little more focused on using the classes and adjusting the design than on making our own styles, trying to make everything responsive, more than 10 @media in our CSS to make our section never look bad. Using this kind of tools will help us to make our development more agile, and in this post I will explain you how.

The first step is documentation

The Tailwind website is incredibly beautiful and intuitive, when we enter the documentation we find this section that with an animation shows us how Tailwind classes work and how we can build a testimonial that seems simple but has a certain I don't know what and catches the attention:

First section of the TailwindCSS documentation

Para comenzar le damos click al botón Get started y entraremos a una página inicial que nos presentará la documentación inicial sobre Tailwind.

TailwindCSS documentation

The best way (and I say this as a personal opinion) is in his YouTube channel, all videos are in English but thanks to YouTube's algorithm we can activate subtitles if we need it to understand what is spoken in the video, and strangely from my own experience I can say that the translations are 90% good. In these videos Adam Watham the creator of TailwindCSS takes us through a way in which we make the frontend of the applications, add various animations and incidentally teaches us to extend the settings of this framework 🎉.

If we navigate in the left bar down we can find absolutely all the utilities that this framework offers us:

Sidebar with a list of TailwindCSS utilities

If we enter to any section we can find an interface where we will see:

  1. a table with a the list of all the classes that belong to that section, with the name of the class and its value.
  2. Examples of use bein graphed so that they can be better understood.
  3. And finally a section to further customize these classes.
Flex Direction documentation

We can learn CSS thanks to Tailwind classes 🤯

Tailwind is very semantic with the way its classes are written:

  • If we want to align the text of a button, we use text-left, text-center and more.
  • If we want to add more columns to our grid we use grid-col-12 or for rows grid-row-8, and looking at the documentation we see that on the back we use grid-template-columns and grid-template-rows.
  • If we want to add the red color we use shades from number 100 to 900, for example bg-red-600.

Behind Tailwind uses a lot of CSS variables in a way that we did not imagine, many classes like bg-opacity-75 what it has inside is a CSS variable --tw-bg-opacity: 0.75; so this would apply an opacity to our background, but how does Tailwind interact with that variable? simple, I show it to you with an example:

For example, the bg-white class would have this output:

.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

As you can notice by default it already comes with the --tw-bg-opacity variable inside it, so when we add bg-opacity-75 in our browser console we will be able to see this:

Tailwind classes in Chrome developer tools

It overwrites the original variable and bg-white interacts with the new variable to generate an opacity. This is mostly how the whole framework works, no classes on top of classes to overwrite things, it uses the potential we already have in CSS and takes it to a new level so high that it doesn't look like CSS, but it is.

VSCode + TailwindCSS

What I like most about Tailwind is the integration it has with VSCode thanks to three extensions that will make your life much easier:

  1. Headwind

This extension allows us to organize our HTML classes by functionality, breakpoints and even pseudo-selectors.

Headwind demo GIF
  1. Tailwind CSS Intellisense

This extension reads your Tailwind configuration file and as you write classes it gives you a list of suggestions and you can even see the value of each class.

Tailwind CSS Intellisense Demo Image
Tailwind CSS Intellisense in hover demo image
  1. Tailwind Shades

Last but not least (because I use it a lot) we have Tailwind Shades, this great extension generates the shades given a color so we can further customize the color mix of our page.

Tailwind Shades GIF demo

How can I install Tailwind in my favorite framework?

Over several months several boilerplates have come out showing how to integrate Tailwind with your favorite tool, and here are some of them:

Conclusions

Sometimes trying a new tool can be difficult, but in my personal opinion I recommend you to take that first step, start by making small projects, adding complexity and making your own components. My own website with animations and transitions is completely done in Tailwind. At my workplace we also use Tailwind for all our projects, and let me tell you that the agility when developing interfaces went up by 40% and the time per project decreased 🎉 so come on! Give it a try

- See you at code 👨‍💻

Want to be the first to read my posts?

Subscribe to the newsletter and you will get tutorials, news and first-hand posts.

0 people have subscribed to the newsletter

Call to action image

What do you want to achieve today?

Get in touch through this button so I can learn more about your product or service and we can discuss the best way to make it happen.