Tailwind CSS for Beginners (2021)

Learn what Tailwind CSS is, how it works under the hood and how you can use to implement your Design

This Class will guide you to become faster in implementing your own Designs just by using Tailwind. In this Class I will teach you the Basics of Tailwind and how it works under the hood.

What you’ll learn

  • What is Tailwind and what makes it so different from other Frameworks?.
  • You learn how to add or setup a new Project with Tailwind.
  • You will learn how the Utilities of Tailwind are actually generated.
  • You will learn how to extract styles and avoid repitition through custom classes.
  • You will learn what the newly introduced JIT Mode is what how it speeds up the development.
  • You’ll learn how to build a simple Landing Page using Tailwind CSS.

Course Content

  • Introduction –> 2 lectures • 4min.
  • Making sure Tailwind is the right choice –> 2 lectures • 4min.
  • Tailwind CSS –> 5 lectures • 51min.

Auto Draft

Requirements

  • You need to have basic understanding of HTML, CSS and optionally NodeJS*.
  • *) NodeJS is actually used to initialize a new Project with Tailwind and make use of a custom Tailwind Configuration (This is Optional).

This Class will guide you to become faster in implementing your own Designs just by using Tailwind. In this Class I will teach you the Basics of Tailwind and how it works under the hood.

Have you ever had a Problem implementing your own Design ion HTML and CSS?
We have a bunch of CSS Frameworks out there like Bulma, Bootstrap and Material for example but they all share one thing and that is predefined styles. Essentially Components.

This is of course useful as it provides us with some starting points but it also has some cons

– It forces us to write HTML like defined by the Framework

– We have to keep in mind what components exist

– We have to remember how the HTML of a Component looks like.

– And it makes Styling those Components harder as we have to override them on CSS Level or at build time which requires us to download the Frameworks Source in order to modify it

Tailwind CSS uses a different way. It is Utility based and that makes implementing a custom design way easier as we can style an element way more granular.

 

In this Class you will learn:

– What Tailwind is and what makes it so different

– Use Cases of Tailwind

– Pros and Cons of using Tailwind

– How you add or setup a new Project with Tailwind

– How the utilities are generated

– How to extract Styles and avoid repetition

– How you speedup your Development with the new JIT Mode

– How to build a simple Landing Page

Get Tutorial