Gain insights into industry best practices for designing web pages with Tailwind CSS. Explore typography, box models, and master layouts using flexbox and grids effectively.

docker.tar.gz

QS_Tailwind

Apply_tailwind

This course examines and explains industry best practices to design web pages using Tailwind CSS. We’ll start with the typography of individual elements, and then we’ll get to “the box”—the rectangle of space each element takes up on a web page and how to manipulate it. Once we have our elements in boxes, we’ll take a look at the page layout using flexbox and grids.

Modern CSS with Tailwind

# Overview of Tailwind

Tailwind seems like a counter-intuitive solution to the problem of managing CSS for a complex site. Tailwind is made up of many small utility CSS class names, most of which set one specific CSS property to one specific value. The preferred way to get complex behavior in Tailwind is to compose multiple CSS classes together on the HTML element.


This goes against a lot of CSS naming conventions that have been developed over the years. Many CSS frameworks and naming conventions suggest using names that reflect the semantic meaning of the element on the page—names such as, ``button``, ``nav-bar``, or ``menu-item``.

Tailwind classes are not semantic. Instead they are all utility classes, meaning a Tailwind class represents a specific element on a page, like `font-bold` for text formatting or `m-6` for margin. Many CSS frameworks include utility classes but consider the semantic class names more important. Using Tailwind and utility classes suggests a lot of duplication because Tailwind utility classes are often repeated on multiple DOM elements.






Get introduced to basic Tailwind concepts.

Introduction

Getting Started with Tailwind

Tailwind Basics

Typography

The Box

Page Layout

Animation

Responsive Design

Customizing Tailwind

Conclusion

Appendix

Tailwind

Overview of Tailwind