karunsiri / techtalk-tailwindcss-lab

Demo lab empowering TailwindCSS. To be used with Tech Talk on Oct 18 @Verumex

TailwindCSS Demo lab

🚀 Quick start

1. Install stuff

yarn install

2. Run local server

yarn develop

Steps as shown in demo

You can go to specific step by git checkout <step-tag>, e.g. git checkout step-1. The HEAD commit will include everything from every step.

• step-1

  Overview of tailwind config files

• step-2

  Using darkmode following the operating system preference. Go to http://localhost:8000/darkmode.

• step-3

  Darkmode improved. Allow you to manually toggle darkmode. Go to http://localhost:8000/darkmode, and click on the toggle button.

• step-4

  Darkmode as a theme. Along with some sample themes that works the same way. We are removing the hardcoded values, e.g. text-slate-800, bg-white, etc. out of our templates by moving values to variables in global.css and add those variables to tailwind.config.js, you can define your own extensions as you desired.

  Go to http://localhost:8000/theme-switcher, and play around.