What We Do

Company

Resources

Events

Blog

Free Consultation

ahoy@headway.io

(920) 309 - 5605

Introduction to Tailwind CSS

July 22, 2021

July 22, 2021

10:00 am

Presented By

Get updates on future events!

Spread the Word!

Bring co-workers, friends, and anyone else you think would benefit from the community.

Introduction to Tailwind CSS

tailwind css graphiclive stream

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


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

Reserve Your Spot

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


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

July 22, 2021

10:00 am

live stream

Spread the Word!

Bring co-workers, friends, and anyone else you think would benefit from the community.

Subscribe for future events

Stay up to date on upcoming events like this one and get valuable resources delivered to your inbox.

Thanks for signing up!
Oops! Something went wrong while submitting the form.

More events and videos

The Manifest

Receive the latest articles, resources, events, and more!