Skip to content

pro-tailwind/workshop-multi-theme-playground

Repository files navigation

Multi-Theme Strategy in Tailwind CSS - Playground App

Welcome to this Pro Tailwind workshop!

This app is similar to the Calendar App, but the theming part of it has been stripped out and "prepared" to be implemented.

There is no need to clone this app on your local machine for the workshop - but you can if you want.

We'll use GitPod during the workshop, to make working on the project a one-click affair.

Want to try it out? Click on the button below to start a new workspace!

Open in Gitpod

Building our plugin in Tailwind Play

In this workshop, we'll build a Tailwind CSS plugin that brings support for multiple color themes to any project using Tailwind.

We'll do most of our work in a series of Tailwind Play challenges, but at some point we'll test our code again this Playground App.

The workshop has its own website: https://theming.protailwind.com


Workshop Schedule

Here's what the workshop timetable will look like:

Time What Length Topic
1:00 PM - 1:15 PM Intro 15 min Meet & Greet, Housekeeping
1:15 PM - 2:15 PM Content 60 min Theming strategy part 1
2:15 PM - 2:30 PM Break 15 min Coffee/Snacks
2:30 PM - 3:45 PM Content 75 min Theming strategy part 2
3:45 PM - 4:00 PM Break 15 min Coffee/Snacks
4:00 PM - 5:00 PM Content 60 min Theming strategy part 3

Focus groups & breakout rooms

You'll be split in small focus groups for today's workshop challenges. This consists of separate "breakout rooms", where each member of the group will take turns "driving" a challenge by sharing their screen.

The groups will remain the same for the entire workshop.

At the end of challenges, we'll all come back together to discuss. "Pairing" in small groups and actively participating to group discusions are key to this workshop. They'll help you maximise your learning experience.

I really encourage everyone to participate actively, ask questions, and of course be supportive of one another!


Aaaand... who am I?

I'm Simon, your workshop instructor. 👋

If you've watched some YouTube videos from the Tailwind Labs channel, you've most probably seen my face already!

I love utility-first CSS. I've been supporting and promoting this styling approach even before Tailwind CSS existed! I'm a front-end developer, designer and content creator.

I bring a lot of enthusiasm and positive energy in everything I do, this is just how I'm wired up!

I have been teaching in-person workshops for multiple senior engineering teams, and a constant piece of feedback I get is my workshops are exciting, fun and engaging. To me, that's the best way to learn!

I sometimes speak at conferences and meetups. I make YouTube videos and I'm also an instructor on egghead.io.

You can connect with me on Twitter, I'm simonswiss 🇨🇭

I'm super excited to dive into this workshop with you.


📜 Assumptions

This workshop assumes the following:

  • You are already familiar with Tailwind CSS and its core concepts
  • You are comfortable enough with CSS and JavaScript

📋 Dev Environment Requirements

You don't need to install anything on your machine for this workshop. However, if you want to get this workshop app running locally, you should have the following installed in your development environment:

See you at the workshop!