Tailwind CSS Essential Training

Tailwind CSS Essential Training

3h 33mIntermediate2021-10-22

Authors

Ray Villalobos

Ray Villalobos

Senior Staff Instructor at LinkedIn Learning

Course details

While the ways in which we work on the web evolve over time, every now and then, a true game changer comes along. The Tailwind CSS utility-first approach throws out many of the traditional CSS approaches to building projects, allowing you to create a complete and unique website without writing a single line of CSS. In this course, LinkedIn senior staff instructor Ray Villalobos shows how Tailwind CSS offers a lightweight but sophisticated approach to styling content in your sites and apps through labeling with appropriate class names. Ray illustrates how you can manage everything from fonts, colors, borders, and the whole layout of your pages by adding Tailwind and specifying its use on the HTML elements in your pages, all without having to touch a style document.

Skills covered

CSSFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off

Concepts

Introduction

  • The Tailwind utility-first approach
  • Using the exercises for this course

Getting Started

  • Installing Tailwind CSS
  • Working with a build tool
  • Custom builds
  • Adding styles

Typography

  • Font directives
  • Text directives
  • List styles
  • Spacing typography

Object Properties

  • Borders
  • Rings
  • Divide
  • Backgrounds
  • Box shadow

Object Metrics

  • Width and height
  • Padding and margin
  • Display and position
  • Object floating and containment
  • Other properties

Layout

  • Flexbox
  • Grids
  • Box alignment

Animation

  • Transformations
  • Transitions
  • Animate
  • Filter utilities
  • Blending mode utilities

Other Options

  • Forms
  • Tables
  • SVG
  • Screen readers
  • Interactive

Just-in-Time Mode

  • Working with JIT
  • Additional variants
  • JIT improvements

Conclusion

  • Next steps
80,000 Toman