Tailwind CSS Essential Training
3h 33mIntermediate2021-10-22
Authors

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
0. Introduction
- 01 - The Tailwind utility-first approach
- 02 - Using the exercises for this course
1. Getting Started
- 03 - Installing Tailwind CSS
- 04 - Working with a build tool
- 05 - Custom builds
- 06 - Adding styles
2. Typography
- 07 - Font directives
- 08 - Text directives
- 09 - List styles
- 10 - Spacing typography
3. Object Properties
- 11 - Borders
- 12 - Rings
- 13 - Divide
- 14 - Backgrounds
- 15 - Box shadow
4. Object Metrics
- 16 - Width and height
- 17 - Padding and margin
- 18 - Display and position
- 19 - Object floating and containment
- 20 - Other properties
5. Layout
- 21 - Flexbox
- 22 - Grids
- 23 - Box alignment
6. Animation
- 24 - Transformations
- 25 - Transitions
- 26 - Animate
- 27 - Filter utilities
- 28 - Blending mode utilities
7. Other Options
- 29 - Forms
- 30 - Tables
- 31 - SVG
- 32 - Screen readers
- 33 - Interactive
8. Just-in-Time Mode
- 34 - Working with JIT
- 35 - Additional variants
- 36 - JIT improvements
Conclusion
- 37 - Next steps