Tailwind CSS 3.0: Fundamentals

Learn to build modern websites with TailwindCSS 3.0 step by step and with examples.

What you'll learn
Install and configure the ideal environment for working with Tailwind CSS
Build a landing page from scratch, following the latest standards of web development
Adapt the page to different screen sizes (responsive design)
Apply CSS states
Implement an automatic dark mode
Reuse classes (don't repeat yourself principle)
Learn to use the 4 first-party Tailwind CSS plugins
Configura and use the new Just-in-Time engine

Requirements
Basic HTML and CSS
Using a code editor
Description
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!

Who this course is for
Web designers and developers who want to improve their frontend skills
Students with knowledge of HTML and CSS who want to learn a new way of working
Whoever wants to learn new technologies in web development