Tailwind CSS Fundamentals

For rapid prototyping, you don't need to install anything. There are two ways to use Tailwind CSS directly: through the playground on their website, or if you prefer to use your code editor you can use the CDN.

Tailwind Play is a code editor on the Tailwind CSS website itself, with the framework and plugins preloaded, so you can easily start prototyping anywhere. In this lesson I show you how to use it.

If you prefer to use your code editor, the fastest and most direct way to use Tailwind CSS is to use the CDN. In this lesson you will see how to move the code you implemented in the playground to the code editor.

There are several ways to install and use Tailwind CSS. In this section we will look at each of them, as well as support in code editors and how to configure them.

If your project does not need Node, the most appropriate way to integrate Tailwind CSS is with the Standalone CLI: an executable file that includes the complete framework. We will see how to install and use it, retrieving the HTML file you used in the previous section.

All other ways of using Tailwind CSS need Node installed. Therefore, in this lesson we are going to see how to install it for each operating system.

The standard way to install and use Tailwind CSS is through the Tailwind CLI. Let's see how to install it, configure it and an example of use.

If your project uses frontend tools like webpack or vite, the most appropriate way to integrate Tailwind CSS is as a PostCSS plugin. After the installation and configuration, we will retrieve the HTML file from the previous lesson to test that everything works correctly.

In the Tailwind CSS documentation you have guides at your disposal to integrate it with various frameworks. Let's see as an example how to use it with React.

The most commonly used code editor with Tailwind CSS is Visual Studio Code. In this lesson I show you some extensions that we will use throughout the course.

In this lesson I show you how to configure and use Tailwind CSS in JetBrains IDE and SublimeText.

In this video you will see a summary of the page we are going to build from scratch. From the mobile version to the one that adapts to other screen sizes, improving usability, using dark mode, and reusing classes in repeating components.

Before we start, let's install and configure Tailwind CSS in our mini-project.

The base version will be for the smallest screen size: that of a mobile phone. This design will have the elements stacked, to accommodate a vertical screen configuration.

We will adapt the page to other larger screen sizes, making use of pseudo-classes, which work like CSS media queries.

We will improve usability by applying CSS states to the button, using pseudo-classes, which work like CSS media queries.

When the dark mode is enabled, we have the dark pseudo-class to adapt what we need. In our case we will adapt the colors.

There are components that are reused in other parts of the project, and have exactly the same classes. For this we can create a custom class, just as we would with standard CSS, but using Tailwind CSS utility classes.

In addition to the functionality of the utility classes, Tailwind CSS supports plugins, and the framework developers developed a few official ones.

This section will look at the most important ones and apply them to the project.

The Typography plugin automatically styles the text in a container.

I'll show you how to install it and customize styles.

You will apply this to a marketing text, which we assume comes from a database.

In addition, the plugin defines default colors for the dark mode. You'll see how easy it is.

Just by installing the Forms plugin, your forms will look much better.

However, these are default styles, and it is best to customize them.

In this lesson, I have added a registration form at the bottom of the page. You will start with the plugin's default styles, and you will change them so that it is well integrated.

For this lesson, we will build a list of featured movies and series.

Each one has a vertical image, but on mobile we will use media queries to display them horizontally, to save space.

With the Aspect Ratio utility you will be able to define the aspect ratio for the screen size you want.

Imagine that one day you see that the synopses are longer, and your design breaks down. The text sticks out from underneath and everything looks terrible.

We will simulate this problem and you will solve it with the Line Clamp utility, which is used to set a limit on any text. You will use it to limit synopses.

This way you will protect your design.

At this point, you will be able to build any page you want. But the framework offers more.

In this lesson, I show you the documentation features that I recommend you consult at this point for further information and consolidate your knowledge.

Congratulations! You have finished the course, and now you know how to use Tailwind CSS and its plugins.

In this last lesson, I recommend what to do now to use what you have learned.