Tailwind CSS Fundamentals | David Morales | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Presentation

      1:39

    • 2.

      What Is Tailwind CSS and What Is It Used For?

      4:05

    • 3.

      Quick Prototypes: Introduction

      0:59

    • 4.

      Tailwind Play: a Complete Online Editor

      9:37

    • 5.

      Play CDN: Tailwind CSS in Your Editor Without Installing Anything

      2:30

    • 6.

      Installing Tailwind CSS: Introduction

      1:28

    • 7.

      Standalone CLI: Installing Without Node.js

      5:46

    • 8.

      Installing Node.js

      2:54

    • 9.

      Tailwind CLI: Standard Installation

      4:24

    • 10.

      With PostCSS: Complete Installation

      3:54

    • 11.

      Integration with Frameworks

      2:53

    • 12.

      Configuring Visual Studio Code

      1:34

    • 13.

      Integrating with Other Editors

      4:36

    • 14.

      Building a Web Page from Scratch: Introduction

      1:45

    • 15.

      Installing Tailwind CSS

      1:33

    • 16.

      Mobile Version

      5:41

    • 17.

      Responsive Version

      7:38

    • 18.

      Applying CSS States

      2:13

    • 19.

      Adding Dark Mode

      2:52

    • 20.

      Reusing Classes

      6:24

    • 21.

      Plugins: Introduction

      1:11

    • 22.

      Using the Typography Plugin

      9:38

    • 23.

      Using the Forms Plugin

      7:48

    • 24.

      Adding a list of movies and series

      16:35

    • 25.

      Using the Line Clamp Utility

      6:52

    • 26.

      An Overview of Advanced Concepts

      2:54

    • 27.

      Next Steps

      1:08

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

290

Students

3

Projects

About This Class

You will learn about Tailwind CSS, the CSS framework that is changing how you work with CSS. You will discover and experience what makes it different from others.

This class will save you the work of study and research, and you will learn the basics from scratch to build any website you set your mind to.

Learn how to use Tailwind CSS in this comprehensive class.

  • Adapt the page to different screen sizes (responsive design)

  • Apply CSS states

  • Design a dark mode

  • Reuse your styles (don't repeat yourself principle)

  • Learn how to install and use plugins

You will build a landing page for a Netflix-like website using the Tailwind CSS utility classes as a class project. You will improve and complete it step by step.

Class overview:

  • You will see all the ways to install and configure Tailwind CSS, including ways to make quick prototypes.

  • Configuring Visual Studio Code, and I will show you the plugins I use to work comfortably.

  • Installing Tailwind CSS and its dependencies, getting everything ready to start working.

  • Building a Netflix-like landing page with a mobile-first approach.

  • Adapting the page to different screen sizes, known as responsive design.

  • Adding CSS states, such as when you hover the mouse over a button.

  • Configuring your page with an automatic dark mode.

  • Creating custom classes that you can reuse, to avoid repeating code.

You will also control the official Tailwind CSS plugins:

  • Typography: to style texts (for example, those coming from a database).

  • Forms: for styling forms

  • Line-Clamp : to limit text and achieve visual harmony (now built-in)

In addition:

  • After each module of lessons, you will take a quiz to check that you haven't missed anything important.

  • I will add more content regularly. You also have access to the repository where I publish the pages' source code.

With this class you will have a good foundation to build any page you set your mind to, with clear and practical lessons.

If you haven't decided yet, you can watch for free some lessons.

And of course, if you have any questions, you can post them in the questions and answers section, where I will answer them.

See you inside!

Meet Your Teacher

Teacher Profile Image

David Morales

Web Developer. Technical Instructor.

Teacher
Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Presentation: Welcome to the Tailwind CSS Fundamentals course. In this beginner's course, I'll guide you in installing and using Tailwind CSS, to create a modern web page. I'm David Morales. I've been working as a web developer for more than 20 years. I have experience using Tailwind CSS since its second version. I've integrated it into my latest professional projects, including custom WordPress themes and complex web applications. When you complete this course, you'll be able to create quick prototypes in various ways, and you'll have made a complete web page from scratch using Visual Studio Code. You'll know how to detect dark mode and change colors automatically. You'll also have installed the plugins using them strategically. In addition, you'll learn how to check the documentation for the classes you need. You'll learn the various ways to use Tailwind CSS. Then I'll guide you through the preparation of your development environment step by step, and you'll start building a website from scratch. First for mobile and then making it responsive. You'll also learn how to apply CSS states, work with dark mode, reuse common classes, and use the official plugins that complement the framework very well. I've designed this course for developers and designers who want to learn how to use Tailwind CSS without spending time studying the documentation or researching how it works. It'll save you the trial and error process, going straight to the point. You only need basic knowledge of HTML and CSS. I'll see you inside to build a website together with Tailwind CSS. 2. What Is Tailwind CSS and What Is It Used For?: What's Tailwind CSS? It's a CSS framework for adding styles to a web page without leaving the HTML. In other words, in the same document where you mock up the page, you apply the classes you need. These classes are called utility classes, since each one has a specific function. They are like Lego pieces where you use the ones you need. Imagine that you have an H1 title, and you want to apply three styles to it: a size of 48 pixels, bold, and centered. You could write a standard CSS class that would look like this, and use it in the H1. In Tailwind CSS, you don't define any classes, but use the pieces it gives you directly in the HTML. In this case, "text-5xl", "font-bold", and "text-center". These classes generate exactly this same CSS. At first, it's normal that this string of classes is a bit scary, and gives the feeling of clutter. At first, the solution with standard CSS seems more organized. But when time passes, after creating the page, if you have to go back and make any modifications, at a glance, you know what the classes do when you use Tailwind CSS. However, with standard CSS, you have to look up the definition of the title class. But no matter how much you read, your mind won't make that click until you try it. When you've been building a page with Tailwind CSS for a while and experienced it, you realize its advantages. And what are those advantages? The first advantages you'll have are... You don't have to think about naming classes. It consumes energy that you could spend on building the page. Also, choosing a bad name may require a lot of refactoring later to fix it. You don't have CSS files to maintain or refactor, since it's all in the HTML. You'll be assured that any changes you make to one page won't break the others, since you work locally in each HTML file. You have predefined limits, so pages have visual consistency. For example, look at size increments and colors. You have a system instead of arbitrary values. However, you can customize and set your increments. You can specify breakpoints in your code to make your page responsive without media queries. If you have a paragraph, you can easily make it red by default, but it'll be green at 768 pixels, and at 1,024 pixels it'll be blue. Using the same formatting, you can apply CSS states. For example, if you have a blue button, darkening it on mouse over is as easy as assigning the hover modifier. But what happens when we have components with exactly the same classes? For example, the buttons usually look the same, changing only the label. This is the famous Don't Repeat Yourself. In these cases, you can create your class as you would with standard CSS, but using the Tailwind CSS classes. Just add @apply in front, and you use your class on the button, as you usually would. Here's a brief overview of what you'll learn in the course. In the first lessons, you'll prepare your development environment installing Tailwind CSS, and setting up your code editor. Then we'll move on to building a web page with a movie listing. First, you'll design it for mobile, and then you'll make it responsive. Next, you'll add some CSS states to the button. You'll adapt the page for dark mode. You'll use more than one button, so you'll extract the common classes to a component that you can reuse. Finally, you'll use some official plugins to do very common things like styling plain text, like what comes from a database. Styling forms, and limiting text to a maximum of lines, while maintaining visual harmony. Line-clamp used to be a plugin, but it's now built-in. At the end, I'll give you some recommendations on what to do when you finish the course. 3. Quick Prototypes: Introduction: You don't need to install anything if you want to use Tailwind CSS for quick prototyping. You can do it in two ways. The first one is in your browser, with Tailwind Play. Within the documentation on the Tailwind CSS website, a section called Playground shows you an online editor with Tailwind CSS integrated. Don't underestimate it because the framework developers use it daily to work on new features. It has a real time preview and a code editor similar to Visual Studio Code, with the framework and the official plugins loaded by default. The second one is using your favorite code editor with Play CDN. In the HTML code, you include the JavaScript from its CDN and you have access to the framework. You can customize it and use the plugins. Although you won't have access to many other things, you can use it to do quick things. In the following lessons, I'll show you how to use Tailwind CSS in these two ways. 4. Tailwind Play: a Complete Online Editor: The easiest way to try Tailwind CSS is through the playground. This is an online editor where the framework is already loaded, with a preview that updates as you type. To access this tool, from the official Tailwind CSS website, click on Docs. Here's all the documentation, but on the left side there are sections with an icon in each one. Click on Playground. And here it is. There are two big parts: the editor on the left, and the preview on the right. What you're seeing is an example that loads when you open the editor, so you can modify and experiment with. There 's a numbering at the top, which is the version of Tailwind CSS that has been loaded. If you click, you'll see the latest one available, for each major version. I'll leave version 3 selected. As I said before, on the left side, there's the editor. It's pretty good. It has syntax highlighting, auto-completion, color detection, indentation, and so on. At the top, there are two more tabs. The first one is the Custom CSS tab. Although it's not necessary, there are times when you'll need to use it. For now, it's empty. It only contains these three directives that are loaded by default, when the file is empty. So it doesn't matter if they are there or not, they'll be loaded anyway. The last tab is for the configuration. To try and do simple things, you won't need to touch it. But if you want to customize the framework and use plugins, this is the place to do it. To the right of the tabs, there's a link that says Tidy. It's to format the code automatically. If you try to remove some spaces here, and add some spaces here, this function puts them back correctly. It works on every tab. For example, in the CSS, if I add a few spaces here... It fixes it. Below, there's the Generated CSS panel, which shows the final CSS that the playground has generated. You can see it all together or separated by modules. In the CSS, each module corresponds to an entry, as you can see above. If you delete, for example, utilities, that code is no longer generated. At the top right, next to the version number, you can change the layout of the panels. And the last icon is the Responsive mode, to test different device sizes. Finally, with this icon here, you can enable dark mode. Now go to the HTML tab and delete everything, because we are going to create a simple example, so you can see how to start from scratch. Enable Responsive Mode. I recommend you to start your designs with a small screen in mind. Okay, let's go to the HTML. Create an H1, and write Tailwind CSS. As you can see, the preview is updating. Add a class attribute. Start by centering the title. Now make it bigger with the "text-4xl" class. In this case, you're saying that the text will be four times bigger than with the "text-xl" class. Many of the Tailwind CSS values go in increments this way, so you don't have to think about exact values. Although if you need a different size not covered by a predefined class, you could do that too. Now I'm going to use a media query with the SM modifier. This means that the class I'll write next will apply to the SM screen size, which is 640 pixels wide, and also to larger sizes. What will I do in this case? I'll set the text larger at size "7xl". Try it out. Make the preview larger. It changes at 640 pixels. Now make the font thicker. With the "font-extrabold" class. Finally, add some top and bottom margin. For example... 10. Let's apply a gradient color effect. To do this, add the "bg-gradient" class, and set the direction to the right. Nothing happens yet because you have to keep configuring the colors, the one on the left and the one on the right. The left one is configured with the "from" class. Then you set the color, for example, "indigo". And now you set the variant... 400. As the color on the right is not configured, it's set to white. The class to set the one on the right is "to". As before, set the color, for example, green... Variant 600. Now you're going to move this gradient into the text. For it, just make the text transparent with this class, and then use a background clip with this class, so that it's applied to the text. Here you can see the final result of the title. If you click Tidy, it rearranges the classes to an order that the Tailwind developers think is better. The idea now is to create some content, so you can see how Tailwind CSS sets default styles through its plugins. Create an H2 and type "lorem". Underneath, add some filler text. Create a couple of paragraphs using the Lorem generator included in the playground. As you can see, it has no style whatsoever. It could easily be content that comes from a database. You'd have to create styles to adjust margins, font size, and so on. Tailwind CSS has a plugin called Typography, that sets default styles, which you can use as is, but they can also be customized. To apply the plugins effect to what you have generated, create a MAIN tag that wraps it, and select what you want to wrap. Move up the selected code. Use this key combination on macOS. On Windows, it'd be ALT and up arrow. Click Tidy to format the code. Now you have to enable the plugin. In the playground, it's very simple. Just switch to the Config tab. Go to the plugins array, press Enter, and type "require", "@tailwindcss/typography", which is the name of the plugin. Now go back to the HTML and add the class attribute to the MAIN tag. Add the "prose" class. Look what happened! The plugin has styled everything inside MAIN. As you can see, H2 is larger, and has vertical margins. The paragraphs have a line height set, and margin as well. You could also enlarge the text size for larger screens. Use the SM Modifier and add the "prose-lg" class. Now it looks bigger. If you make the preview smaller, if you get to the minimum size, the "prose" class is applied, and if you get to the SM point, "prose-lg" is applied. Notice the CSS code that generates this class with SM Modifier. The text is stuck to the edges. Add some side margin with a "px-5" class. The X indicates that it's applied horizontally. If you want to apply it vertically, you'd put a Y. Another very interesting plugin is the Forms plugin. Let's create one. Add a FORM tag at the end. Remove the action attribute because it's not needed. And now, inside, add a field with an INPUT tag. Email type, and add an identifier as well. By default, it has no borders, so it's invisible, but if you click, it's there. Now add a LABEL tag for the email field. Type email... It stays on the same line. Add another INPUT tag... Submit type. Type submit... Add a class attribute. With a class block, you put it on its own line. Assign it a color with a class "bg-", for example, "blue"... 500. White text, rounded corners, a little side margin, and some vertical too. To break it up a bit, add a top margin. 5 is fine. Okay, this is the form. Let's see what the Forms plugin offers. Enable it in the Config tab, add a comma at the end of the first "require", and type "require"... "@tailwindcss/forms". See how the form has changed slightly, especially the field. As a final touch, put the field also on its own line with the "block" class. And so you can play with the Playground tool. As you can see, it's very simple and convenient, but obviously it won't help you to work on real projects. For that, I'll explain other methods next. 5. Play CDN: Tailwind CSS in Your Editor Without Installing Anything: You'll need to create an empty folder for this example. I created one called Tailwind CSS, and opened it in Visual Studio Code. Create the index.html file. Now type "html", and choose version 5. Change the title to something better... Tailwind CSS Just below it, add a SCRIPT tag. In the "src" attribute, type https://cdn.tailwindcss.com That's all. But before you see it working, I recommend installing an extension to preview the HTML. It's called Live Preview by Microsoft. Install... Done. Open the preview with this button. Make the size smaller... Add the class attribute to the body, and set the background color to white. IntelliSense doesn't work when you use the CDN. So you'll have to write the classes manually. Go back to the playground, and copy all the HTML. Now paste this HTML inside the BODY tag. You can see in the preview that the text isn't very readable. The FORM field is invisible either. The only missing thing is to enable the plugins. So append a question mark to the SCRIPT address, because you're going to pass a parameter to it. And write "plugins=typography". Look how it has changed! Now the plugin is already taking effect, but the form doesn't have any styling yet. You have to include the Forms plugin too. It's very simple. In the SCRIPT, add a comma, and type "forms". The page reload and you're done. Everything looks already like in the playground. The resizing at the SM point also works. I see the CDN as an intermediate step between the playground and compiling your CSS code. It's using your favourite editor to work with Tailwind CSS quickly. Now, if you're going to work seriously on your project, the most correct way to do it is by installing the libraries and compiling the final CSS code, because that will also give you access to many advanced features of Tailwind CSS that you might need later. We'll practice it in the next lesson. 6. Installing Tailwind CSS: Introduction: As you've seen in the previous chapter, Tailwind CSS is very flexible, since you can use it in several ways without installing anything. But if you want to work seriously with this framework, it also has a lot of flexibility to install it in your environment. You can install the Tailwind CSS standalone CLI if you don't need Node JS in your project. You can view it as a package that includes everything you need, without requiring dependencies. The standard installation, which is also very quick and easy, uses Node JS. It'll be the only dependency to install Tailwind CLI. There's still one more way to install it, and that's as a PostCSS plugin. This is the recommended way to do it if your project, besides Node JS, uses some building tool like Webpack or Vite, among others. And speaking of modules, Tailwind CSS integrates very well with different frameworks, such as Next JS, Nuxt JS, Angular, Laravel, Ruby on Rails, or Phoenix, to name a few. But the tool developers use the most is the code editor or IDE. The Tailwind CSS developers have developed a plugin for Visual Studio Code that works very well. There are also plugins for other editors such as SublimeText or IDEs such as JetBrains. All this is what you'll learn in this chapter. 7. Standalone CLI: Installing Without Node.js: If you're working on a project where Node JS isn't necessary, and you want to use Tailwind CSS, you can use the standalone CLI. It's an executable file that includes everything needed to run. The first step is to go to the Tailwind CSS repository on GitHub, and click on the latest published release. In my case, I'm using mac OS on a Mac with an Apple Silicon processor, so I choose this one here. Later on, I'll show you the steps for Windows and Linux. Create a new directory for the course project. I already have one created with the name tailwindcss, and have opened it in Visual Studio Code. Open the terminal integrated in the editor and type this command to move the file to the current directory, renaming it to tailwindcss. Assign it execution permissions... And run it. macOS shows an error message because it can't verify that it's a safe file. To continue, open System Preferences, click on the on Privacy & Security... and if you scroll down... you'll see this area where it says that the system blocked Tailwinds CSS. Click the button to unblock it. Go back to the editor and run the command again. macOS displays the same error message again, but now you can allow it with this button. At this point, I'll digress to show you how to install the tool on Windows. From the release page on GitHub, download the file for Windows. The browser has blocked the file. To allow it, click on the three dots... and choose the keep option. Windows asks for confirmation. Unfold the options here, and choose the keep option. Downloaded. Back in the editor, open the terminal and type this command to move the file to the current directory... renaming it to tailwindcss.exe Run it. From here you can continue where we left off. I'm going to make one last digression to show you the steps on Linux. From the release page on GitHub, download the file for Linux. Downloaded. Back in the editor, open the terminal and type this command to move the file to the current directory... renaming it to tailwindcss. Assign it run permission... and run it. From here you can continue where we left off. Ok, now that it's working, initialize the project with the "init" option. The configuration file is now generated. Let's take a look at it. The content is very similar to the config tab of the playground. The essential configuration here is to tell the compiler in which files to look for the Tailwind CSS classes to use, to generate the final CSS file. To do this, add here in content and in quotes, the current directory, all files... that have the HTML extension. You can close this file now. Now, run the tailwindcss command with the -o style.css option, to tell it the CSS file to generate, and add the watch option to keep monitoring the changes. Let's see what the generated style.css file contains. The whole initial part is a CSS reset, so that the generated styles look the same in all browsers. Keep scrolling down... Here are the margins. Here you can see the classes you've used to build the gradient. Centering of the text, font sizes. In short, the compiler, leaving aside the CSS Reset, only adds the styles corresponding to the classes you've used, and other required styles. Let's see how it renders. Retrieve the index HTML file we made in the quick prototypes chapter, and open it. Open the preview as well. The styles are being fetched from the CDN, so you have to remove the script tag. After the page reload, you'll see that the styles are gone. Now add a link tag, CSS type. By default, it already points to style.css, so the page now looks better. However, this page used the typography and forms plugins. The Standalone CLI includes all the official plugins. You just have to enable the ones you need. Open the configuration file... and in plugins, add a require for typography, and another one for forms. After a page reload, it looks like it did originally. To stop the tailwindcss command, just press CTRL+C. In this simple way, you can install Tailwind CSS in your environment and start working quickly. 8. Installing Node.js: Tailwind can be installed in several ways, but the standard and most recommended way is through the Node JS package manager: NPM. NPM will take care of managing the dependencies that Tailwind needs. NPM is part of Node JS, so by installing Node JS, you're all set. To install Node JS, the most recommended way is through a version manager like NVM, which will allow you to install and use the different versions of Node depending on each project. Or, if you don't need to use several versions, you can install a global one for everything. I'll show you how to install it depending on the operating system you use. If you use macOS or Linux, google NVM. You'll find this GitHub repository. Here are the installation instructions, usage, and solutions to common problems. Scroll down to installing and updating, and click. Either of these two commands will download and install the tool. I'll copy the first one since I have curl installed on my system. Open the terminal and paste the command to run it. It's now downloaded. It has added the configuration in your shell file, and to get it working, you must restart the terminal. Now you can check that the nvm command has been installed like this. It should return the name of the command. You can now install Node JS in this way. And to finish, update the packages to the latest versions. You can check the version of Node JS like this. And NPM like this. If you use Windows, google npm-windows. You'll find this GitHub repository. To install it, click on the latest release here, and download the installer zip. Open the zip... and run the installer. I'm going to accept all the default options. Done. Open the command prompt... and install Node JS like this. It tells you that to use this version, you should run this command. Upgrade the packages to the latest versions. You can check the Node JS version like this. And NPM like this. 9. Tailwind CLI: Standard Installation: In this lesson, we are going to configure your development environment with the libraries and commands needed to work seriously with Tailwind CSS. If you followed the Standalone CLI lesson, you can delete the tailwindcss file. You can also delete the configuration file: tailwind.config.js It's not necessary to delete the style.css file, as the Tailwind compiler will rewrite it completely. Open the terminal and type npm install -D This will install the packages dependencies of the development phase. In other words, they won't be present in the final version, because they won't be needed, as they are development tools. tailwindcss Let's get to it. Wait for NPM to download and install everything... That's it. NPM reports the packages that have been added. These are the ones that Tailwind CLI needs to work. If you look in the sidebar, you'll see that three new items have been added. The first one is the node-modules folder. This is where those NPM packages have been saved. The second is package-lock.json, which is like an index of everything in the node-modules folder with their version numbers, so that NPM knows when something needs to be updated. And the third one is package.json, which contains a list of the libraries you've installed with the terminal, the main ones, without their dependencies. We'll take a look at it later. Since we are using two plugins in our example, let's install them as well. Type npm install -D and now type @tailwindcss/typography Let's add the forms as well. @tailwindcss/forms It informs of the packages that have been added. Open package.json Let's take a look. As you can see, it contains a JSON block called devDependencies. This means that these are development dependencies. Inside are the two plugins, and Tailwind CSS. Notice how each one has its version number. If you wanted to update the libraries, NPM could query this file and know if there are updates. How do you update them? In the terminal, you'd have to type npm update. As you can see, everything was already updated. With the packages already installed, you now have to initialize the project for use with Tailwind CSS. In the terminal, type npx tailwindcss init The tailwind.config.js file has been generated. Open it. And in content, tell the compiler to look for Tailwind classes in HTML files, in the current directory, and in plugins, add a require for typography, and another for forms. Now you can start the compiler. In the terminal type nps tailwindcss -o, and specify the final CSS file: style.css Add the watch modifier so that it stays monitoring the changes. Open the preview, and this is the result. If you want to see how fast the CSS updates when you make changes, try adding a class. For example, make the email label bold. Add the class attribute, add the font-bold class, save the file, and watch in the terminal how it recompiles. Reload the page manually if necessary to see the changes. If you go back to the CSS, let's look for the font-bold class. Here it is. This feature of Tailwind CSS is called just-in-time. And as you can see, it consists of having in the CSS only what you've used, so that your page looks good in all browsers. 10. With PostCSS: Complete Installation: PostCSS is a tool to make CSS transformations with JavaScript such as auto-prefixing, future syntax support, modules, or linting. Many more functions can be added with its plugin ecosystem. Using PostCSS makes sense if your project uses a tool like Webpack or Vite. Then you can integrate Tailwind CSS as a component. Before we start, you already have files in your directory. Let's remove the JSON files and the configuration file: tailwind.config.js It's not necessary to remove the style.css file, as the Tailwind compiler will rewrite it completely. The first step of the configuration is to install some NPM packages. Type npm install -d, so they are installed as development dependencies. Next, tailwindcss, which is the framework package, postcss, and autoprefixer, which is a PostCSS plugin to add the prefixers for the various browsers in the final CSS. Also, install the two Tailwind CSS plugins we've used for typography and forms, tailwindcss/typography... and tailwindcss/forms. You'll see that three elements are generated. Node-modules, which contains the packages you've just installed and their dependencies. The package.json file, containing the packages you've installed, and package-lock.json, which contains all the dependencies with their versions. Now that the Tailwind package is installed, let's use it for the next step, which is to create the Tailwind configuration file using this command: npx tailwindcss init Add also the -p option to build the PostCSS configuration file and be able to configure Tailwind as a plugin. Two files have been generated: tailwind.config.js and postcss.config.js The first one is where the framework is configured. Initially, there are a few empty options. In the content option, specify the current directory and all HTML files. This option will scan the HTML files in the current directory, and see which Tailwind classes you use to generate them in the final CSS. In plugins, you have to configure the ones you've installed. Add a require for the typography plugin. And another one for the forms plugin. Now you can close this file. The second file is used to configure PostCSS plugins. It's already pre-configured for the ones you've installed: Tailwind CSS and Auto-prefixer. You can close the file. The steps taken so far are done only once per project. Now you can run the Tailwind command to compile the final CSS file. Type in the terminal npx tailwindcss, -o, and specify the file name, style.css Also, add the option to keep watching the changes in your project and update it automatically. This option is watch. The style.css file is already generated. If you take a look, you'll see that it already has initial content. Let's close it, as we have seen this file in previous lessons. As we've kept the HTML from the previous lesson, where we did the standard Tailwind CSS installation with Tailwind CLI, let's use it to see if it works. Open index.html and the preview. Great! All the elements are displayed correctly. 11. Integration with Frameworks: Tailwinds CSS can be integrated with any web development framework. However, if you access the documentation on the website, here on Installation, there's a tab that says Framework Guides. As the name suggests, you can find step by step guides to configure Tailwind CSS with these frameworks. Let's follow the example of a simple React application. Click Create React app. The first step is to create the app with this command. Create React app is an NPM package that will ask you for confirmation to install, if you don't have it already. After that, it will start creating an initial React app, installing its dependencies. When the installation finishes, open the project with an editor. I'm using Visual Studio Code. Open the integrated terminal, and continue checking the guide. Next, install Tailwind CSS. Copy the command, and paste it in the terminal. If you open package.json, you'll see the newly installed packages at the bottom, under DevDependencies. Back to the guide, copy the command to create the Tailwind configuration file. Open the file, and for the case of React, Tailwind will have to look at the files located in SRC and having these extensions. Now you have to add the CSS directives. Copy them, and in SRC, open the index.css file. Paste the directives above. Tailwind CSS is now integrated with this React application. If you go back to the guide, the next command is to start the server. Copy it, and paste it into the terminal. It opens a browser with the default application that has been created. The guide ends with a small HTML snippet with some Tailwind classes. Try it. Open the app.js file, and select the sample HTML. Now paste the code from the guide. I'm going to add an extra class to set the text in red. I'm also removing this import because it's no longer needed. When you save, check the terminal to see how the application is compiled. Switch to the browser. The page has been updated with the new content, and the Tailwind CSS classes working. 12. Configuring Visual Studio Code: You can use the code editor of your choice, but the standard for Tailwind CSS is Visual Studio Code. Especially for the plugins that will allow you to work faster. Go to the extensions section. The first extension is to install the official Tailwind CSS IntelliSense. It'll allow you to auto complete classes, preview colors, mark errors, see what each class does in detail, and some other things. Another one I recommend is Tailwind Docs. You can search for any Tailwind class using the command palette, and open the documentation quickly. Search for PostCSS now. You'll see PostCSS language support. Since Tailwind CSS uses PostCSS directives in the main CSS file, this extension will make the editor recognize them, and not flag them as errors. You'll see it in action later in the course. I recommend you install it. The last extension is Live Preview, by Microsoft. If you followed the previous lessons, you should already have it installed. Remember that it allows you to have a preview of the page you are building next to the editor, making the workflow faster. The preview is updated as you type, but sometimes you won't see the changes immediately because the CSS file is regenerated continuously. In those cases, you'll have to reload the preview with this icon. 13. Integrating with Other Editors: Although you can use any editor to add the Tailwind classes in the HTML, it's much more convenient if the editor integrates with the framework. The editor that the Tailwind CSS developers officially support is Visual Studio Code. If you have doubts about which editor to use, this should be your first choice. If you've followed the previous lessons, you'll already have it configured and checked its integration. The next recommendation is any Jetbrains IDE, which includes native support for the framework, which means no need to install any plugin. The other editors don't have native support and you'll have to find and install a plugin. You'll see SublimeText as an example later. Let's start with the Jetbrains editors. I'll use WebStorm as an example, which is the one focused on JavaScript development. If you like IDEs, Jetbrains makes these tools for the most popular languages. Before you start, make sure you have NodeJS installed, as I explained in a previous lesson. Once WebStorm is open, create a new project. Empty. Now make sure CSS plugins are enabled. Open preferences. In the Plugins tab, look for CSS. This is the CSS plugin, which is already enabled by default, and this is the Tailwind CSS plugin, which is also enabled. Let's close the window. Now, open the terminal, and install the Tailwind CSS packages with npm install -D tailwindcss. Unfold the project directory. It has generated the package files and the node-modules directory. Back in the terminal, create the configuration file with npx tailwindcss init. You can open it to see the initial content. In content, tell the compiler to look for classes in the HTML files. With this, the IDE has everything it needs to integrate with Tailwind CSS. Let's see an example. Create the index.html file, and inside BODY, create any tag, for example, an H1. Now add class, and start writing a Tailwind class, for example text. The IDE is now showing suggestions. Choose 4xl. Now set the color to blue with text-blue, and choose 500. You can see what CSS each class generates if you hover. For an editor that doesn't have built-in support such as SublimeText, you'll need to find a plugin. To do this, you first need to have the package control installed, which you can do through the command palette. Here type package, and choose Install Package Control. After a few seconds, it shows a confirmation message. Now you can search for the plugin via the same command palette. Type install, and choose Install Package. This loads the plugin repository and displays the complete listing. Type tailwind, and these are the available plugins. I recommend Tailwind CSS Autocomplete for writing classes. Open the command palette again, Install Package, type tailwind, and I recommend you also install the Tailwind CSS plugin, which will add compatibility with the main Tailwind style file, which you'll see later in the course. Now, save the file as index.html, type HTML and press TAB. This option will create a basic HTML template for you. Add an H1 title, a class attribute, and start typing a Tailwind class, for example, text. You'll see that the plugin kicks in and displays a list of classes that match what you've typed. Choose one, for example, 4xl. I'm going to set the text in blue, variant 500. Maybe this plugin will be improved with more functionalities in the future, or even new ones will appear. It's about trying them out and choosing the one that works best for you. 14. Building a Web Page from Scratch: Introduction: Now that you've configured Tailwind CSS and seen how to use it, let's build a page step by step, using only the Tailwind classes. Let's see a sketch of what we're going to create. We'll start with a mobile version because you should build every website this way first. It's what's called mobile-first. It consists of a header image, a title with two colors, a small paragraph, and a button that takes up the entire width. After this, we'll adapt it for larger screen sizes, which is known as responsive. On a tablet, we'll enlarge the size of the texts, and the button won't fill the entire width. For larger screens, such as a laptop, we'll change the page structure, moving the image to the right and the content to the left. Then, we'll add some interactivity, which is always good for usability. We'll add CSS states to the button so that hovering over it will change the color, and clicking on it will also change the color. And speaking of colors, we'll adapt the page for dark mode, so that when the operating system enables this mode, the page will set a dark background color and adapt the rest. At this point, you'll have the page already created. If you want to make more pages, there'll be components that you'll want to reuse, such as buttons. We'll see how to create a custom class that contains the button styles, just as you would with standard CSS. I recommend that you pause the videos throughout the course so that you can build the page yourself. 15. Installing Tailwind CSS: Before building the page, let's install Tailwind CSS in the standard way. Create a new directory and open it with your code editor. If you prefer to get the files directly without following this video, you can get them from the branch 04_02f. You can continue watching the video if you prefer to create a new directory or start with branch 04_02b. Open the terminal, and install Tailwind with npm install -D tailwindcss Add the plugins too, the one for typography... and next the Forms plugin. When the installation is finished, update the NPM packages. And now it's time to initialize the project with Tailwind, which will generate the configuration file. Open it. In content, add this formula to tell the compiler to monitor the HTML files. Now include the plugins we've installed. The one for typography, and the one for forms. Close the file. Go back to the terminal, and start the compiler so that it updates style.css, and stays monitoring the changes. Everything is ready to start. 16. Mobile Version: In this lesson, we'll build a mobile version of the web page, following the mobile-first philosophy. It'll look like this. It consists of a header image, a two color title, a small paragraph, and a full width button. Let's start by saving the header image. You can download it in the resources section of the project. In Visual Studio Code, create a folder to save the image. You can call it img. Then, drag the image you downloaded to the new folder. This is the image. Create the Index HTML file, and generate a basic HTML5 structure. Write a title like movies and series. Under the title, add a LINK tag, which by default points to style.css Open the preview, resize the panel a little. I'll show the header image with the image tag, pointing it to the file, and with the alternative text cinema. Add the class attribute to the body, and set the class p-0. The problem with this image is that if you enlarge the preview, you'll see that it grows in width and height. We'll block it, so it doesn't grow in height, and avoid filling the whole screen. The solution is to set a fixed height. Add the class attribute to the image, and use the class h for height, for example, 64. Now the height is fixed, but it doesn't fill the width of the page. So you can solve it with a class w for width, and write full. But now it looks deformed, especially when the panel is wide. You can fix this with the class object-cover. Now you can see that it's not deformed, keeping the height fixed. Let's go with the title. What's your favourite and in the next line, movies and TV shows. Increase the font size with the class text-4xl. Let's make it stand out with the class font-extrabold, and reduce the spacing between letters. To place the second part of the title below the first, put it inside a DIV layer. Let's set it in blue. All the content below the image will be centred, so let's place it inside a container. Here, set the class text-center, and add a top padding of eight. Also a bottom margin. Next, we're going to create the subtitle inside a P tag. Stream unlimited movies and TV shows on your devices. Increase the size... with the class text-lg. To keep the title well visible, reduce the color strength to a medium gray. If you reduce the panel to simulate a mobile screen, the text is too close to the sides. Add some margin in the container with a px class, which adds it to both sides. Four would be enough. Also, add some top margin to the text, with the class mt-3. If you make the panel wider to simulate a wide screen, the subtitles shouldn't be so wide. To set a max size, use the class max-w, and for this case, I think md would be fine, and center it with mx-auto. The last element of this page is a button and write get started. The background will be dark red, the text will be white, set side paddings, and a little bit vertical. As you can see, it's invading the text area. To solve it, use the class in line-block, and add a top margin of 10. Let's set rounded corners with the class rounded, size lg. To emphasize the button, we'll do a couple of things. The first is to add some shadow, size lg. And the second is to make the font stronger, semibold, and larger, size sm. For mobile, I like a button of this type to fill the entire width. This is achieved with the w-full class. And this way you've created your first page using the Tailwind CSS classes directly in the HTML tags. 17. Responsive Version: For now, the website is designed for a mobile screen. If you enlarge the preview width, you'll see that the content takes up all the horizontal space. The solution is to make the page responsive, which means that it adapts to the screen size. This is achieved by using breakpoints, that is defined in CSS. For example, you can specify a width of 500 pixels, another of 1000, and another of 1500. In this case, you'd have three breakpoints, and you could control each element to adapt to the screen size. Tailwind includes five breakpoints. The first size is SM, with a width of 640 pixels. The second is MD, with a width of 768 pixels. This is usually the size of a tablet in portrait. The next is LG, with 1024 pixels wide. It'd be what an iPad measures horizontally, or a size of a computer screen. Then comes XL, with 1280 pixels wide. And the last one is 2XL, with 1536 pixels wide. These definitions use standard CSS media queries internally. So for example, if you want to apply a style for the MD point, it'll affect MD, LG, XL, and 2XL. To apply a breakpoint, prefix it to any Tailwind class. For example, if you want to apply a top margin of 12 pixels, add the class mt-3 as a prefix for the MD point. This is what the page will look like for the SM breakpoint, where the text size is bigger, and the button no longer fills the entire width. If I keep zooming in, I get to the MD breakpoint, where everything looks bigger. The last breakpoint will be LG, where the page structure changes. Components are no longer stacked. The image is on the right, and the content moves to the left. Let's start by making the title larger for the SM breakpoint. Let's try 5xl. Enlarge the preview until you reach the SM breakpoint. It jumps here. The text is too small. Let's make it larger. XL seems fine. At this size, the button should no longer fill the entire width. Set an automatic width to fit the text. The image should be a little taller. In its container, specify a height... 72, for example. If you resize the preview, you'll see the difference between the mobile and tablet sizes. Now let's go to the MD breakpoint. We'll make the image even taller, with a size of 96. Enlarge the preview to see the difference. Let's make the title bigger. One more point, 6xl. Notice that the text is too close to the title. Add a top margin. Maybe 5 is fine, but since there's more room now, let's allow it to grow horizontally with max width. 3xl. Add more padding to the button to give more visibility. The PX class adds horizontal space. I think 10 will make it look good, and PY adds vertical space. 4, for example. The text could be also bigger, LG. The difference is noticeable. Finally, let's go with the LG breakpoint, where the elements will be even bigger, because there's a lot of horizontal space, and the elements can be placed side by side. We'll not use the breakpoints that go after LG for simplicity, but if you need them in your project, you can go on increasing the element size, or even relocate them, as you'll see now. First, I'm going to create a main container that will contain everything. Move everything inside. Now set the flex class to the container, which will place the two elements inside side by side. Enlarge the preview. It works correctly. Let's make some changes to this page layout. I want the image to be on the right. For it, a Flex property called order specifies the order in which each element appears inside Flexbox. For the image, as I want it to appear at the end, I'll use order-last. Cool. Although I believe that it's too big, I'm going to restrict its width to just half of the container. So set the class w-1/2. That's better. But the original image is a bit larger. It'd be nice if it took up more vertical space. To achieve this effect, add the h-full class to the image, to make it fill the entire height of the container. Add the same class to the container as well, so that it also fills the entire height of its container. And this container is finally the body which by default has the height of its elements. Add the h-screen class, so that it fills the entire height of the document. Let's go now with the content on the left. We'll start by adding a top padding of 48, and align the text to the left with the text-left class. If the window width is larger, the subtitle adapts and fills it. Let's limit the width of all the left content with the w-max class. For example, LG. Remove the margins. It looks better this way. Finally, if you make the preview very wide, simulating a large screen, you'll see that the elements are spaced too far apart, because they span the entire width. To avoid this, limit the width in main. For example... 7xl. And center it with mx-auto. If you check it again, it appears limited now. The page is now adapted for different screen sizes, using Tailwind CSS breakpoints. It was as simple as adding them as a prefix to each class. Let's see the final result. All the elements are stacked in the smaller size for mobile screens. It's the initial design from which everything starts. As the screen grows, the content adapts. Here's the SM breakpoint. Here's MD. And for LG, there's already so much space that the elements are repositioned differently. 18. Applying CSS States: Now that the page is adapted to the screen, let's add some interactivity. For example, when you hover over the button, there is no color change. In this lesson, we'll apply an effect to the button using Tailwind CSS states, which work in much the same way as the breakpoints you saw in the previous version. If you click on the background, and press the tab key, you'll see that the button is selected with a border. Let's improve it by using our own style using Tailwind's ring utilities. These utilities define a ring, like a border, but outside the element. Add the hover state to the button. And darken the background with a value of 800. Now let's change the border of the button when you press the tab key, as I showed you before. First, using the focus utility, remove the current border, setting the outline-none class. Then also with the utility focus, add Tailwind's ring class and let's start configuring it. With offset, we are setting a separation of 2. And if you press tab, you can see how it's looking. Set a red color 800, which is the same as the button itself. So that the border isn't too prominent, reduce the opacity to half with the ring-opacity class. This is the result, which also appears when you click. And just for this click action, I think it'd be nice to darken the button a little more. With the active utility, set a red color with the maximum value of 900. This is the final result. In this simple way, you can apply CSS states to the elements of your page. 19. Adding Dark Mode: Adapting the page to dark mode is a highly recommended practice, which consists of applying darker colors when the user's operating system has this mode activated. You'll need to enable dark mode on your operating system to work with this feature. I'll show you where this option is on Windows, macOS and Linux. In Windows, open settings from the start menu. Then you go to Personalization, and select Colors. In this drop down, you can switch between light and dark modes. In macOS, open System Preferences, then go to Appearance, and up here, you can switch between modes under appearance. In Linux, it can vary a lot between distributions, but taking Gnome as an example, you have a shortcut in the corner. Open the menu, and click on dark mode. You can also search for appearance, and in style, you have the light and dark modes. The page should always be designed with the light mode enabled, and then customize the colors in the dark mode. I've already activated the Dark mode in my operating system. I recommend you to pause the video and enable it too. Okay, the first thing we'll customize is the page background color, which bothers the eye the most. Use the dark state, and set a dark gray background color. The title is now barely visible, so set it to a light color. Lighten the text a little bit too. If you press the tab key, a dark red ring and a white separation appear on the button. Let's adapt it. Combine the dark and focus states, and change the dark red ring to a lighter one. If you press tab again, the space between the button and the ring remains white. Add the class offset which will be the ring spacing. If you've thought of making it transparent, you'll see the offset taking on the ring's color. Better manually set the same color of the page background: gray-900. Press tab again. Now it looks better. I recommend you to try other states, like clicking. I think it looks good like this. The page is now adapted to the dark mode. 20. Reusing Classes: If you look at the code you've written so far, some elements have many classes. In principle, this shouldn't be a problem, but let's take the button as an example. Usually you'll use the same type of button on all pages, so you'll have to copy and paste its classes into all buttons. This presents a problem, especially when you want to update the style, since you must do it on all buttons. In these cases, creating your own class that contains the Tailwind classes you use is better. This class must be defined in a custom CSS file. The way the custom CSS works is as follows. When you run the Tailwind CLI command, you pass the path to the custom CSS. Tailwind loads its content, which also contains the Tailwind layers. I'll explain what they are later. Then it scans the HTML files to find which Tailwind classes you use. And finally, it generates the final standard CSS that the browser will read. Now let's create that custom CSS file. Create an SRC directory, and inside create the Tailwind CSS file. This is an example, you can call it whatever you want, and place it in another directory. In fact, you don't need to put it inside any directory, but it's usually placed in SRC, and that's where I recommend you to put it. The main parts of this CSS file are the Tailwind CSS layers, which are defined with the @tailwind directive. These are three. Tailwind base, Tailwind components, and Tailwind utilities. The base layer resets the CSS, so that the styles look the same in all browsers. The components layer defines a container that fills the maximum possible width using media queries, and the utilities layer contains the rest of the Tailwind classes. Now, compile this file to generate the final CSS. Repeat the NPX command, and add the -i option, passing the path to the Tailwind CSS file, which contains the Tailwind layers. src/tailwindcss. If you check the style CSS file, you'll see that the result is the same as before. This is because if you don't use any custom CSS file, Tailwind defines the three layers automatically for you. To avoid remembering the syntax of the Tailwind command, let's add it in package.json so you can invoke it in a simpler way. Open package.json And add a new scripts block at the top. Inside, assign a name to the command, for example watch, because it'll be the variant with that option, which is the one I recommend you to use. Then you can type the command. Copy and paste this command and rename it to minify. Replace the watch option with minify. Now, in the terminal, instead of typing the command manually, you can type npm run, and the name of the command you added to the package file. For example, watch. You are up and running! Now it's time to define your first custom class. Open the HTML. And select all the classes that define the button. Cut, and write btn instead. If you look at the preview, the button has lost its style. In tailwind.css, add the class btn. Inside, type @apply, and then paste all the button classes. The apply directive is necessary to let Tailwind know that you're using its classes. Now the button looks correct in the preview. This way you can reuse this class on all pages so that your buttons look the same. But imagine you want the button to look a little bigger on this page, but not on the others. You could add a Tailwind CSS at the end to override the ones in the class itself. For example, we have defined py-3 to set vertical padding. Let's increase it to 5. Go back to the HTML, and add the py-5 class at the end of the button classes. As you can see, it doesn't work. Let's see why. Open the custom CSS, and notice the utilities layer. As I explained before, this layer defines the rest of Tailwind classes, including py-5. But we have defined the btn class below, and it's overwriting the utilities styles. That's why the change is not applied. The order is not considered, even if you've used py-5 at the end of the class attribute. What is important is the order in which the classes are defined in the CSS. To solve this problem, you should move the btn class before the utilities layer. As you can see, it works now! You can define your class as part of the components layer to avoid problems like this. Move your class to the end again, and put it inside the components block, using the @layer directive. Now it's part of components and will be placed before Tailwind utilities in the final CSS, avoiding overwrites like the one you've seen. To finish, remove the py-5 class we added as an example. If you duplicate the button, you'll see that the styles are kept. This way, you avoid repeating the same classes. As a final recommendation, try not to abuse this feature, since the benefit of Tailwind is to have its classes directly in the HTML. You should only use this feature when it's obvious, such as when a component has many classes, and you use it on several pages, with buttons being the clearest example. 21. Plugins: Introduction: In this part of the course, I'll show you some official Tailwind CSS plugins. This means that the developers of the framework themselves have created them. We'll see two. The first one is Typography. Imagine that you have this HTML code, which is composed of a div that you have created, and what inside comes from a database, for example, from WordPress. As Tailwind CSS removes all default styles from the browser, this code produces this result. With this plugin and its prose class, you can style that part you don't control. The second plugin is Forms. Just by enabling it, it styles the forms automatically. Customizable, of course. Finally, we'll look at the Line-Clamp utility, which used to be a plugin, but it's now built-in. Imagine you have this paragraph of text, and want to display only three lines. With the line-clamp-3 class, Tailwind limits the maximum number of lines and adds ellipses at the end. 22. Using the Typography Plugin: The typography plugin applies styles to text you cannot control, such as those coming from a database in a CMS like WordPress. In this case, it'd be what is inside the DIV. The output would be unstyled text. After enabling the plugin, you can add the prose class to the container to add predefined styles. You can download the text HTML file from the Resources section of the project. Once downloaded, drag it to the main folder of the project. The text contains an image. You can also download it from the Resources section of the project. Once downloaded, drag it to the IMG folder. This is the image. If we look at the example text, you can see that there are headings, paragraphs, a FIGURE block containing the image and a caption, a list, a table, and a link. Select all the sample text and copy it. Go back to the index, and create a DIV after the MAIN. Now, inside the DIV, paste the text. Adjust the indentation, and you can delete the file you downloaded. This is what the text looks like. As I explained at the lesson's beginning, imagine that you have made a query to a database at this point. The text is in HTML format but has no Tailwind classes applied, because it was probably created with some editor, such as WordPress. The only way to style this text would be to create a style for each element inside the container manually. You'd have to foresee all the tags the text may contain, so it can be complex to maintain. Tailwind solves this problem with a typography plugin, applying predefined styles when you use the prose class. These styles are a good base you can customize, as we'll see later. You can put styles in the container to apply some margin. Add a vertical margin of 20. Then a horizontal margin of 5. Make sure it's always centered with mx-auto. Now I need to see how the container looks on the LG breakpoint, but we'll need to see it better at the resolution I'm recording. So instead of enlarging the preview, I'll use an external browser. You can see that the text is wider than the header. Let's solve this by applying a maximum width, like in the header. Type lg:max-w-7xl Now you have limited the width. Let's leave a little more top margin at this size. For example, 24. I open the preview again. You can see how it looks. Now that we have the text in place, let's use the typography plugin. The first step is to install it. Open the terminal, and type... Relaunch the compiler. It's installed! If you open the configuration file, remember that the plugin is already added in plugins. Now go back to the HTML, and add the prose class to the container. The plugin has predefined styles: margins, sizes, even colors. And the table now has well tabulated information, with lines separated in each row. At the end, you can see the example link, which by default is black. Let's change this so that all links are red. To do this, in the container, add the class prose, and the color, in this case, red. You can force the preview with this icon if the preview is not updated automatically. One last thing about the links. If you click on the page's background, and press the tab key, you'll see that it's selected with a predefined orange outline. If you want to customize this color, you can do it with the plugin modifiers. Let's see it in the documentation. Open the Visual Studio Code command palette, and type: tailwind docs typography if you didn't install the Tailwind docs extension, you could look for this section manually on the Tailwind CSS documentation website. In this plugin documentation, scroll down to the Element Modifiers section. Here you have the complete list. Since we want to customize the outline of the links, we'll have to use the prose-a modifier, which, as you can see, corresponds to an HTML link. Back in the editor, add the focus state. And disable the outline with outline-none. Now, let's create a new outline, also with the focus state. Use the prose-a modifier that you've seen in the documentation, and add a ring with the ring-2 class. Now set it to dark-red, opacity 50%, and for the dark mode, make it a little lighter red. Click again on the background and press tab. The color is already changed. As you can see in the documentation, you can customize more styles with the modifiers. For example, imagine you want all the text to be a different color, for example, red. Let's start with the paragraphs that corresponds to the prose-p modifier. Back in the editor, add prose-p, text-red, 500. Now all paragraphs are red. Let's do the same for the H2 subtitles. Go back to the documentation, now we have to use prose-h2. At the end, add prose-h2, text-red, 500. Now the subtitles are red. Let's complete the rest of the elements. Let's continue with the text below the image, which if you look in the code, is a FIGCAPTION. In the documentation, it says prose-figcaption. Changed. Let's continue with the list. In the documentation, it says prose-ul. Changed. Finally, there's the table. In the documentation, there's a prose-table. Now, let's go for the headers, which are TH. In the documentation, it appears as prose-th. And finally, the elements in bold. Are equivalent to prose-strong, in the documentation. All the text is now in the new color. To continue, let's remove the red colors customizations, which we've only seen as an example. We'll customize one element, images, to prevent them from being too big. To do this, add the class prose-img:max-w-2xl. The 2xl size will be the maximum for all images included in the container. If you check the LG breakpoint, this image is now limited, because the original is much larger. Let's see how it looks with the dark mode enabled. As you can see, the result is pretty bad. Fortunately, Tailwind has a class that you can use for this mode. Add the dark state, and add the prose-invert class. That's it. It's now adapted to dark mode. Easy and fast. To finish, looking at how it looks in a wider window, you can see that the header has a large text, but the text we are working on is quite smaller. To increase the size of the text at this breakpoint, we'll use the prose-lg class. This is the result. To summarize, first, you must install the plugin with NPM and enable it in the configuration file. Then in the HTML, in the text container, use the prose class. If you want to customize some style, you can use the modifiers. To adapt the colors to the dark mode, you can use the prose-invert class, and to enlarge the font, the prose-lg class. 23. Using the Forms Plugin: If you add form elements to your page, you'll see that they don't have any default styling. This is to give you complete control to apply the styles you need. This decision in Tailwind CSS goes against most CSS frameworks, which offer default styles and on many occasions, you have to overwrite them if you want to apply customizations. However, if your project is simple and you don't need customization, or if you want a good starting point, the Forms plugin automatically applies predefined styles. Let's create a small registration form at the bottom of the page, asking for the user's email and password. Just below the last paragraph, add an H2 subheading that says Registration. Then create the form. In action, you can set a hashtag to redirect to the same page. Inside the form, start creating the label for the email. Set the sr-only class, which means "screen reader only", so it's only visible in screen readers. This is useful for accessibility, hiding it for regular browsers. Email. Then define an input email field. As a placeholder, type email. Now create the label for the password. Also with the sr-only class. Password. Now generate the input password field. As a placeholder, type password. Enclose each pair with a DIV. At the end of the form, add a button with the btn class, which you already created for the header button, the one saying "Start". This way we reuse the styles, making the page more homogeneous. Send. We'll add some classes to the form to leave a space between each field. Flex, column direction, and with a vertical space of 5. We'll make the fields fill the whole width by assigning the w-full class. This way the form doesn't have any style for now. Let's install the Forms plugin to add predefined styles. The first thing is to install the plugin. Open the terminal, and type npm install -D @tailwindcss/forms And as usual, relaunch the compiler. Remember that in the configuration file, we've already added the plugin. The fields now look better, but there's a lot of room for customisation. I'll customize the email field so you can see how it changes from the password field, which uses the plugin's default styles. Adjust the horizontal margin, and also the vertical margin. Let's write something... It looks good, but let's highlight it more. Set the text in the field black. Let's try again. Now it stands out more. To finish, let's set the border to light gray, with a little shadow, and rounded corners. Let's make some adjustments for larger screen sizes. Enlarge the preview up to the SM breakpoint. The fields don't need to fill the whole width at this size. We'll adjust them to take up half, with the w-1/2 class. W stands for width, and 1/2 for half. Add this class to the password field as well. It doesn't look good either that the button fills the whole width. So we'll limit it with the self-start class, which belongs to flexbox. Let's see how it looks. Better! When the field is selected, a blue border appears. Let's change it to the characteristic red of this page. Add the focus state, and set a ring, size 2, dark red, opacity to 50%, and make the field's border transparent. In other words, you'll see a Tailwind ring, but not the HTML border. The difference is that the ring is on the outside, wrapping the field, being even possible to separate it, as we did with the button, although we won't do it in this case. Now it looks much better. Let's switch to dark mode. When we select the field, we can hardly see the ring. Let's highlight it by setting a lighter red for the dark mode. It could be highlighted a little more by increasing the size. To the next value, which is 4. Also, set the opacity to 50%. Although we've already defined the opacity before, the dark mode doesn't inherit this style. That's to say, if we've already defined it for the light mode, and want to use it for the dark mode, we must set it again. I'm going back to light mode. As it's likely that you'll use these custom styles for all the forms in your project, I recommend using a class of your own and thus avoid repeating the same classes. So cut all the classes, type the name of a new class, for example, input, and now in tailwind.css, create the input class after btn. Type @apply, and then paste the classes. Now that you've seen the difference between default styles and customization, let's match them by assigning the input class to the password field. If you prefer to avoid setting your class in all the fields, let's do it in another way. Remove the input class from both fields. Now in tailwind.css, replace ".input" with input, type, email, and input, type, password. This way you define the styles for these fields by default. In summary, as you did with typography, first, you have to install the package with NPM. Then in the configuration file, enable the plugin after the previous one. That's it. Although if you want, as we've seen in this lesson, you can apply your customization on each field, or by grouping the shared classes in the tailwind.css file. 24. Adding a list of movies and series: To demonstrate how the next plugin works, we'll need more material to work with. We'll create a small list of four movies and series. You can download the four covers from the resources section of the project. Drag them to the IMG folder when you've downloaded them. We'll place the list after the MAIN block. Create a UL list. Let's start with the first item on the list. The first thing to be displayed will be the image. Visual Studio Code detects the IMG files. Choose Mr. Robot, and fill the Alt attribute. Let's separate the list from the Get Started button with a top margin. Add some horizontal padding so it doesn't stick to the edges. Set a background color to the element, for example, a very light red. As the image occupies the whole element, the color is not visible. Apply horizontal and vertical padding to the LI, and the background will be visible. Let's round the corners a little bit too. For a card effect, add a border. Stylize the image a little by adding a shadow and rounding the corners. Let's add the title below the image with an H3. Mr. Robot. And underneath, inside the paragraph, let's specify if it's a series or a movie. In this case, it's a series. Set a red color, 600. Enclose the title and the paragraph with a DIV, and add the text-lg class. Modify the height of the font to 6, increase the weight to medium, and separate them a little. Add a top margin to separate them from the image. Next, we'll put the synopsis. Create a paragraph, and inside we're going to generate some dummy text with the Lorem Ipsum generator in Visual Studio Code. Trim the text so that only four lines are visible. To separate the synopsis from the text above enclose it in a DIV. Now in this DIV, set the space-y-4 class, which means we're adding margins above and below. At this point, the mt-4 class in the DIV inside doesn't quite work for me. Let's include this DIV and the image in a new DIV, and set the space-y-4 class. This way we're adding some separation, and the mt-4 class is no longer necessary. The synopsis competes with the title, so let's reduce its prominence by setting it in a lighter color. The last element will be a button to watch the video. Type something like watch. Assign it the btn class you've used before. As it's red and draws attention, reduce its prominence by decreasing the height. This is the final result in mobile view. Enlarge the preview until you reach the SM breakpoint. You'll notice it because the watch button changes in size, because it inherits from the btn class, which already incorporates this behavior. With this width, it makes little sense to stack the elements, so we'll place the image on one side and the text on the other. The DIV that encloses the image with the other inner DIV is the one that must define this new structure, which will be a grid. So, using the SM prefix, add the grid class, and define it with three columns, so that the image is small on the left side. Add the spacing of six. If you notice, the title is slightly lower than the image. This is due to the space-y-4 class. It can be corrected with space-y-0. As the grid has three columns and we're only using two, let's make the text fill the two columns on the right, thus filling the blank space. Locate the DIV that contains the texts, and add the col-span-2 class. Let's place the watch button at the bottom. One way to do it is to position it absolutely. And for that, its container must have a relative position, and that container is the DIV that fills two columns. Add the relative class, and now set the absolute class to the button. Then specify that it should be displayed at the bottom. This is the final result in the SM breakpoint. Keep enlarging the preview until you reach the MD breakpoint, where the button changes again in size. At this size, the card is too wide. Add the max-w-2xl class. To center the card, use the mx-auto class. If you narrow the preview, entering the SM breakpoint again, you'll see a jump. This can be solved by assigning the classes you just added to the SM breakpoint. I see the button is too wide. Let's also limit it with the px-3 class. The card width can also be limited for wide mobile screens. Reduce the preview to the mobile view, and zoom in without reaching the SM. The image becomes absurdly large. If you add the max-w-md class, it looks better! And to apply the centering from here, remove the SM prefix from mx-auto. You can move it to the beginning if you want. Finally, add more top margin. 36 should be fine. That's how it looks. And we arrive at the LG breakpoint, where the screen already has a considerable size, and we can consider another way to organize the elements. In this size, we'll display the cards in a grid. For this, we need to add the rest of the cards. Copy and paste the LI and all its content three times. Now we have four cards, but they are the same. Let's change the covers and titles. The second one is The IT Crowd. Write the title in the Alt tag. You can copy and paste it into the H3. Let's go to the third card. The Matrix. The Matrix Resurrections. Copy the text and paste it into the H3. Change series to movie. Finally, the last card is The Social Network. Type the Alt. Copy and paste it into the H3. This is also a movie. You can see that the cards are glued. Add a separation in the UL tag, space-y-12. Now they are separated. This is how it's looking. Let's define the list as a grid at this point. It'll have two columns. Set a horizontal separation, and another vertical one a little bit superior, 12. Here you can appreciate that the second card has a superior space, and the vertical spacing of the grid seems exaggerated for the 12 value. Compared it with the horizontal of 8. This is caused by the space-y-12 class. Let's override it with the value 0. The maximum width should be increased. Let's set it to 5xl. As you may have seen, the watch button is superimposed on the synopsis, due to its absolute position. Let's make the cards taller, setting a height of... 72. Now, to move the button down, let's use Flexbox. Remove the absolute positioning, and also the relative positioning of the container. Start by making the outer DIV container the maximum height. Now the DIV containing the texts should be a Flexbox in column direction. And for the button to move to the end, a straightforward way is to make the synopsis space grow to the maximum with the grow class. And so that the button doesn't take up the entire width, use the self-start class. Now replicate these changes to the other cards. Copy the h-72 class from the LI, and paste it on the second card. On the third and on the fourth. Copy the H full class from the container and paste it into the second card. On the third, and on the fourth. Copy the flex classes from the texts container, and paste them on the second card, replacing the relative class. On the third, and on the fourth. Copy the grow class from the synopsis, and paste it on the second card, on the third, and on the fourth. Finally, copy the self-start class from the button, and paste it on the second card, replacing the absolute and bottom-0 classes. On the third, and on the fourth. To finish the layout, we must control the size of the images. These are all the same height, but the design could look bad if they weren't. Let's get back to the mobile size. Here the images are too tall, and a lot of vertical space is lost. Let's start with the first. Let's set an aspect ratio of 3:2. This means that it will have a wide rectangular size, just the opposite of what it's now. This is done with the Tailwind CSS aspect class, which internally uses the aspect ratio standard CSS properties. Add the aspect class. As you can see, IntelliSense displays a list of predefined classes. The first is auto, which would show the image's original size. The second is square, which shows a square size. And the third is video, which applies a 16:9 aspect ratio. But our options aren't limited to these options, because we can put any arbitrary value with the square brackets. We'll use the proportion 3:2. To prevent the image from being distorted, we must show only a part of it as if it were a window. To do this, add the object-cover class. And now, we'll specify which part we want to show, which will be the bottom. Add the object-bottom class. This is how it would look like. Now, enlarge the preview to the SM breakpoint. It's interesting to show the image vertically in this size, but we'll do it in a controlled way, maintaining an aspect ratio. Add the aspect 3/4 class, and center it with object-center. Copy the classes we just added. Paste them into the next card. In the next one, and in the last one. This is the final result. But to finish, let's adapt it for dark mode. Enable it first. In the LI label, set a gray background, 800 intensity. The border is also gray, 700 intensity. Copy these colors to the rest of the cards. The second, the third, and the fourth. Finally, set the title color to white. This is how it looks in dark mode. 25. Using the Line Clamp Utility: The Line Clamp utility is used to truncate text to a maximum of lines. It used to be a plugin, but it was included in the class library because the current browsers already support this CSS functionality. Let's see with an example. Imagine you have a design like this: a grid of two rows by four columns. You've put dummy text in each cell, which is well laid out. Notice that each cell has precisely six lines, but when you use the actual text from the database, each cell has content with different lengths, and the layout gets messed up! If you apply the Line Clamp utility to each cell, specifying the maximum number of lines, for example, the six lines of the dummy texts, the layout looks fine again. Let's look into this problem on the example page we're developing. We have to replace the dummy texts with real synopses. You can download the synopses.txt file from the resources section of this video. Once downloaded, open it, copy the first synopsis, and replace the dummy text from the first movie. As you can see, the text is longer than we had intended and goes outside the element. We'll take care of that later. Copy the second synopsis, and paste it over the dummy text from the second movie. Copy the third synopsis, and paste it over the dummy text of the third element. And finally, copy the fourth synopsis, and paste it over the dummy text of the last item. You can now delete the synopsis file. Let's assume that the data on the page comes from a database. We've designed the page with dummy text, which has messed up the design. Tailwind has a class called truncate, which adds three dots at the end of the first line when it reaches the container boundary. this case, it wouldn't be a good solution because it discards too much text. The ideal in this case is to truncate the text, so that they have a maximum of five lines, and then they all would be equally tall. In standard CSS, a property called webkit-line-clamp does just that. But for it to work, you have to use other properties together. The Line Clamp utility provides this functionality with a single class. In the P tag of the first synopsis, start typing line-clamp, and different values appear. You can limit up to 6 lines. There's also the none to undo the effect, in case you've applied it globally to some container. Try the first one. There's a problem here. Although the ellipses are placed correctly, the rest of the text is not truncated. This is due to an incompatibility of Line Clamp with Flexbox. Line Clamp in standard CSS is still under development and internally uses a display incompatible with the current version of Flexbox. If you try removing the grow class, you'll see that it's now fixed. Let's reposition the button absolutely. Add the absolute and bottom-0 classes to the button, and relative to the container. Try limiting it to 3. We'll leave it at 5, which is how we designed it. To finish, replicate these styles on the rest of the cards. Let's go to the next one, remove grow, position the container relatively, and the button absolutely. Go in with the third one, remove grow, position the container relatively, and the button absolutely. And now the fourth one, remove the grow, position the container relatively, and the button absolutely. If you need to limit it by more lines, for example, 10, you can define that value in the configuration file. Inside the theme / extend, add a new lineClamp option. And inside the block, define the key, 10, and its value in quotes, 10. If you go back to the HTML, and delete the 5, you can see how IntelliSense now displays the new value. If you choose it, you can see how it's been applied. Although obviously it's now out of frame. Finally, if you only want to use this new value in one place, it may not make sense to add it to the configuration file. You can simply use an arbitrary value in square brackets. It's the same result. Let's leave it as it was. Here, leave it at 5. In the configuration file, remove the lineClamp option. With this technique, it doesn't matter how long the synopsis is, the design won't break. In summary, you've seen how to adapt the height of the different containers to maintain visual harmony. This is done with the h-full class, and by positioning the button absolutely. To truncate the text, in the text container, you applied the Line Clamp class. To add new values, you must define them in the configuration file, inside the lineClamp option. Or if you want to use the new values directly, you can put them in square brackets. 26. An Overview of Advanced Concepts: With what you've learned so far, you should be able to build any page you want. However, there's more to the framework. Open the tailwindcss.com website, and click on Docs. I'm going to tell you about some more advanced aspects, so you know what they are about, and keep them in mind. Then you'll know where to look if you need them. In this course, I've shown you how to use Tailwind CSS directly, but if you use a JavaScript framework, there are guides to integrate it. You have them in Installation / Framework guides. For example, if you use Next.JS, you have this guide. Or if you use Laravel, you have this one. In Using with preprocessors, you have more information about PostCSS, the library Tailwind uses to compile the final CSS. You have instructions to do some interesting things. If you scroll down to Use separate files for imports, you can see how to split your CSS classes into different files and import them. At the end of the guide, there's information on how to use Sass and other processors with Tailwind. In hover, focus, and other states, there's a list with examples of all the CSS states managed by Tailwind. In Dark mode, in the last section, you'll find how to implement a button on your page to switch between light and dark modes, and save this preference in the browser. Under Plugins, in the Adding base styles, section, you have instructions on how to customize fonts or even add new ones with font-face. If you manage several projects, and you usually have several classes of your own, for example, for buttons, in the Adding components section, you have an example of how to extract these classes in a plugin that you can include in your projects. If you notice something missing from Tailwind, in the section Adding utilities, there's a guide to add new classes. Theme describes how to set up your project with initial styles already customized. In Presets, there's also related information. The rest of the customization guides show you how to change the default values of breakpoints, colors, or spacing. Preflight explains what the Tailwind base layer does, and how the initial styles look. From here, all the Tailwind classes are covered, classified by categories, until you get to the Official plugins section, linking to the repository of each one. As a last resource, above, in Screencasts, you have access to the Tailwind YouTube channel, where they teach you how to do real tricks. If you want to reach a very advanced level, check it out! 27. Next Steps: Now I want to congratulate you on reaching the end. Very good! You already have the knowledge you need to build any page with Tailwind. Now I recommend you to configure the framework in some project you're working on with what you've learned, and replace some part of it, using the Tailwind classes in the HTML. Another alternative could be to build a page from scratch. The one you want. Because the key now is to practice and internalize this framework as much as you can. Make mistakes, and learn to solve the problems you find, because only then you'll really understand it. With this, I want to tell you not to just watch the course and archive it. Don't let too much time pass to apply what you've learned, and go back to the lesson you need to review. Of course, if you have any questions about what you've seen, don't hesitate to ask your questions in the corresponding lesson. As a final recommendation, keep an eye on the blog section. There, they'll be publishing new versions and explaining what has changed. Thanks for your time and effort.