Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Tailwind CSS 3 Essential Training

Tailwind CSS 3 Essential Training

2h 35mIntermediate2022-11-09

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 utility-first approach of Tailwind 3 throws out many of the traditional approaches to building projects on the web, 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 3 offers a lightweight but sophisticated framework for styling content on your sites and apps through labeling with appropriate class names.

Discover utility-first features with techniques vetted by a Tailwind power user. Find out how to modify, customize, and manage content as you build the layout of your pages, adding Tailwind and specifying its use on the HTML elements of each page. Along the way, get tips from Ray on leveraging Tailwind plugins to control your text, classes, designs, line clamp, and typography according to specs.

Skills covered

CSSFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off

Concepts

0. Introduction

  • 01 - Why utility-first frameworks matter
  • 02 - Using the exercises for this course
  • 03 - Using GitHub Codespaces with this course

2. Getting Started

  • 04 - Working with Tailwind CSS
  • 05 - Creating a custom build
  • 06 - Tailwind Play
  • 07 - Examples with CodePen
  • 08 - CodeSwing playground

3. Utility-First Features

  • 09 - Preflight
  • 10 - Utility class structure
  • 11 - Tailwind pitfalls
  • 12 - Color classes
  • 13 - Shortcut classes
  • 14 - Special classes
  • 15 - Responsive design
  • 16 - Custom properties
  • 17 - Challenge - Create a layout
  • 18 - Solution - Create a layout

4. Power Techniques

  • 19 - State modifiers
  • 20 - Position modifiers
  • 21 - Form modifiers
  • 22 - Child and sibling elements
  • 23 - Attribute modifiers
  • 24 - Pseudo-elements
  • 25 - Media modifiers
  • 26 - Dark mode
  • 27 - Challenge - Dark mode and grouping
  • 28 - Solution - Dark mode and grouping

5. Customizing Tailwind

  • 29 - Exploring the config
  • 30 - Configuring themes
  • 31 - Existing scales

6. Plugins

  • 32 - Plugins
  • 33 - Typography
  • 34 - Line clamp

Conclusion

  • 35 - Next steps

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
Zarinpal
Zibal