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.