0% completed

All LessonsFree Lessons (6)

Introduction

Why Tailwind About This Course

Getting Started with Tailwind

Quick Start Add Tailwind Features Quiz Yourself on Tailwind

Tailwind Basics

Using @apply for Duplication

Retro Designs: Introduction

Quiz Yourself on Tailwind Basics

Typography

Size and Shape Color and Opacity Alignment and Spacing Tailwind Forms Retro Designs: Font Styling

The Box

Box Padding and Margins Borders Background Style Gradients Background Images Image Features Retro Designs: The Box Quiz Yourself on Typography and Box

Page Layout

Layout Features

Retro Designs: Page Layout

Quiz Yourself on Page Layout

Animation

Simple Animations Animation Properties Retro Designs: Animation Quiz Yourself on Animation

Responsive Design

Tailwind Screen Widths and Breakpoints Hide Based on Size Flex on Larger Devices Quiz Yourself on Responsive Design

Customizing Tailwind

Customizing and Configuration File Basics Screen Width Default Color Spacing Change Generated Classes A Tour of the Prefixes Declaring Variants Access Tailwind from JavaScript Purge CSS Quiz Yourself on Customizing Tailwind

Conclusion

What's Next?Congratulations

Appendix

Installing Tailwind Typography Plug-in

Modern CSS with Tailwind/

...

/

Grids

Grids

Learn how to manage the elements in a grid layout.

We'll cover the following...

Grid layout
Feature of CSS grids
- Try it out

One of the great innovations of the first round of CSS frameworks was support for a grid layout, where we could easily place things on a 12-column grid. The existence of grid spacing made the page layout much easier. Over time, the frameworks became even more flexible, and eventually, grid support was built directly into CSS.

Grid layout

Grids are still great for many layout choices, and Tailwind offers useful utilities for setting up a grid layout using the CSS grid properties. First, ...