In this presentation, Chris Held, Senior Developer at Headway, will introduce this popular CSS framework and help you get started building in Tailwind.

‍

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Unlike other CSS frameworks, it doesn't come with predefined components. Instead, Tailwind CSS operates on a lower level and provides you with a set of CSS helper classes.

‍

Get a chance to learn

• Tailwind basics
• How Tailwind stands out from the crowd
• Pros and cons of using Tailwind
• What a Tailwind site looks like
• How Tailwind fits into the React ecosystem

‍

Tailwind CSS examples

What does a site in Tailwind look like?
`Collapsible` React component from Elixir for JS Devs site:
Elixir for JavaScript Developers

• github link 1
• github link 2

‍
Config example from Tailwind site‍
Default config

‍

Tailwind CSS Resources

Tailwind Documentation
Tailwind Play
Tailwind CSS IntelliSense
HeadlessUI
From semantic CSS to Tailwind - Refactoring the Netlify UI codebase

‍

Segments

00:00 - Intro to Tailwind
01:40 - What is Tailwind?
03:07 - Utility CSS vs Semantic CSS
04:44 - Advantages of Tailwind CSS
11:16 - Disadvantages of Tailwind CSS
17:38 - Tailwind CSS Examples
21:36 - Configuration for Tailwind
26:49 - Tailwind Play
30:23 - Headless UI
32:40 - Netlify Classnames Template Literals & Blog Post
35:00 - Upcoming Events and Careers at Headway
36:14 - Questions

‍

‍