Tailwind CSS 3 Essential Training

Tailwind CSS 3 Essential Training

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 27m | 429 MB

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.

Table of Contents

1 Why utility-first frameworks matter
2 Using the exercises for this course

Getting Started
3 Working with Tailwind CSS
4 Creating a custom build
5 Tailwind Play
6 Examples with CodePen
7 CodeSwing playground

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

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

Customizing Tailwind
28 Exploring the config
29 Configuring themes
30 Existing scales

31 Plugins
32 Typography
33 Line clamp

34 Next steps