TailwindCSS

In this session, we'll look at TailwindCSS, a popular CSS utility library.

Housekeeping

What is Tailwind

Slides: Tailwind CSS

Core Tailwind Concepts

Materials

Starter Code

Box Model utilities

Colour

Typography

Transition and Animation

Today's Achievement

m ### Match a layout Using TailwindCSS utility classes, try to re-create a design/layout of your choice from a screen cap such as this one:

Screencap of some text

Instructions

  1. Take a screencap of one of your assignments, projects, designs that you would like to re-create with TailwindCSS.
  2. Using Tailwind utility classes, re-create the design to the best of your ability.
  3. Submit the following to Brightspace:
    • The screen cap you used for this achievement
    • The GH repo of your work
    • The deployed GH Pages link

Lesson Prep

Tailwind Core Concepts