TailwindCSS - Demo

This presentation is only available as code, but for those that can't run it locally this README will go through the slides as if it was a PowerPoint.

Run presentation locally or skip to presentation section:

Basic commands to get started

Clone the repo

git clone https://github.com/avo-SS/tailwindcss-demo.git

Install packages and run

yarn install

yarn dev

Keyboard & Mouse Navigation

• Use left-arrow ◀️ to navigate to previous slide.
• Use right-arrow ▶️ to navigate to previous slide.
• Use down-arrow 🔽 to navigate to next section.
• Use right-arrow key 🔼 to navigate to previous section.
• Hover at the bottom of the screen to make navigation buttons visible

Presentation

1. Agenda

2. Information

3. Why look into

Section 2

Section 3 NextJS - CSS

Section 4 State of CSS

4. What is

Section 2 What it's not

Section 3 Tailwind is

Section 4 Live coding

5. Core Concepts

Section 1

Section 2

Section 3

6. Landingpage Demo

To switch between the themes when running locally

• In the file tailwind.config.js uncomment this line require('./tailwind-presets/cosmetics-preset.js')
• In the browser click on the content-swap button in the header navigation
• Disclaimer: The page is not built responsive as it is only for demonstration purposes.

Tech theme light	Tech theme dark

Cosmetics theme light	Cosmetics theme dark

7. Landingpage Comparison

8. Figma to Tailwind with Skaidi Design System as an example

9. Command Line Interface

Run these commands from root:

• Watch output file when making changes to styles

npx tailwindcss -i ./styles/globals.css -o output.css -w

• Build minified output css file

npx tailwindcss -i ./styles/globals.css -o output.css -m

10. Demo of different ways of working with TailwindCSS

• Normal tailwind classes
• Twin.macro styled component
• Button with props for color isRed
• Styles extracted into an object and referenced inline with css attribute
• CSS Modules with @apply directive

11. Summary with Pros & Cons

12. Q & A

Questions or looking for recording of presentation?

Feel free to contact me at anton.vo@soprasteria.com