Intro to Tailwind CSS - Why Tailwind? Pros and Cons, Examples, and Resources

Why Tailwind CSS? What are the pros and cons of Tailwind? Chris Held, Senior Developer at Headway, will walk through an intro to Tailwind CSS, his experience with it, and resources to 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:
Config example from Tailwind site

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