Tailwind CSS 3 Essential Training

This is the repository for the LinkedIn Learning course Tailwind CSS 3 Essential Training. The full course is available from LinkedIn Learning.

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.

Instructions

This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add /tree/BRANCH_NAME to the URL to go to the branch you want to access.

Branches

The branches are structured to correspond to the videos in the course. The naming convention is CHAPTER#_MOVIE#. As an example, the branch named 05_02e corresponds to the fifth chapter and the second video in that chapter. Some branches will have a beginning and an end state. These are marked with the letters b for "beginning" and e for "end". The b branch contains the code as it is at the beginning of the movie. The e branch contains the code as it is at the end of the movie. The main branch holds the final state of the code when in the course.

When switching from one exercise files branch to the next after making changes to the files, you may get a message like this:

error: Your local changes to the following files would be overwritten by checkout:        [files]
Please commit your changes or stash them before you switch branches.
Aborting

To resolve this issue:

Add changes to git using this command: git add .
Commit changes using this command: git commit -m "some message"

Installing

1. To use these exercise files, you must have the following installed:
   • Node.js
   • Git
2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree.
3. Check out the slides for the course

Instructor

Ray Villalobos

Author, Multimedia Developer

Check out my other courses on LinkedIn Learning.