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
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