Tailwind CSS 3.0: Fundamentals

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 course 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 course.

• 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

Tailwind CSS is the most popular CSS framework of the moment, with a very different approach to standard CSS.

Usually, you have written CSS when you want to style your web pages. Tailwind CSS gives you predefined classes that you can include in your HTML directly.

The framework covers everything you might need: colors, sizes, font types, margins, spacing, flexbox, rounded corners, shadows, etc. So you can write a fully customized design without having to write any CSS.

This way of working gives you several advantages. For example:

• You don't spend energy choosing class names.

• You don't have a CSS file to maintain.

• The styles are local to each page.

Frameworks based on utility classes, such as Tailwind CSS, are already being used by well-known companies like GitHub, Heroku, Twitch, or Kickstarter. Netflix is already using Tailwind CSS on its top 10 lists of the most-watched TV and films. The usage trend is growing in the market.

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

Course overview:

• Installing Node. It is the base to install the necessary packages.

• 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 4 official Tailwind CSS plugins:

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

• Forms: for styling forms

• Aspect-Ratio: to control the aspect ratio of images

• Line-Clamp: to limit text and achieve visual harmony

In addition:

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

• The course is alive, and I will update it as Tailwind CSS evolves. You also have access to the repository where I publish the pages' source code.

With this course, I make it easy and practical for you to have a good base and build any page you want, with clear and practical lessons.

If you haven't decided yet, you can watch for free the lesson where we build a page from scratch. So you can see the whole process.

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!