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:
https://elixirforajs.dev/
https://github.com/chris-held/elixirf...
https://github.com/chris-held/elixirf...
Config example from Tailwind site
https://tailwindcss.com/docs/configur...
Default config: https://github.com/tailwindlabs/tailw...

Tailwind CSS Resources:
Tailwind Documentation
https://tailwindcss.com/docs/
Tailwind Play
https://play.tailwindcss.com/
Tailwind CSS IntelliSense
https://marketplace.visualstudio.com/...
HeadlessUI
https://headlessui.dev/
From semantic CSS to Tailwind - Refactoring the Netlify UI codebase
https://www.netlify.com/blog/2021/03/...


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