By filling out this form you agree to receive future marketing emails and newsletters from Headway
By filling out this form you agree to receive future marketing emails and newsletters from Headway
Bring co-workers, friends, and anyone else you think would benefit from the community.
Get up to speed on the basics, the pros and cons, see examples, and learn how to build layouts faster with Tailwind CSS.
In this presentation, Chris Held, Senior Developer at Headway, will introduce this popular CSS framework and help you get started building in Tailwind.
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.
What does a site in Tailwind look like?
`Collapsible` React component from Elixir for JS Devs site:
Elixir for JavaScript Developers
Config example from Tailwind site
Default config
Tailwind Documentation
Tailwind Play
Tailwind CSS IntelliSense
HeadlessUI
From semantic CSS to Tailwind - Refactoring the Netlify UI codebase
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
Stay up to date on upcoming events like this one and get valuable resources delivered to your inbox.
Receive the latest articles, resources, events, and more!