horacioh/react-europe-tailwind-demo

Notes and Demo code for my ReactEurope 2020 Talk

Hijacking CSS with tailwindCSS

👉 MAIN GOAL: to help designers and developers understand the tool and make their own judgement if it works for them or not!

Table of contents

Who am I?

• Bio
• Twitch and Youtube Plug
• originally a designer

Setting some context

• using it for almost form X time?
• I use to code all my CSS
• reinforce my design background

Tailwind

Small intro

• Utility first
• Responsive to the core
• Component-friendly
  • No specific classes for components
  • component examples: https://tailwindcss.com/components
• designed to be Customized: https://tailwindcss.com/#designed-to-be-customized
  • built with PostCSS
  • you can set your configuration

Some cool features

• pseudo-classes
• Documentation and Screencasts: https://tailwindcss.com/screencasts/
• It is very intuitive* (for me!!): explain that is intuitive for me because I KNOW css beforehand. therefore class names are very familiar.
• Plugins!: https://github.com/aniftyco/awesome-tailwindcss#plugins (mention: https://github.com/chrisrowe/tailwindcss-triangle-after)
• Enforce consistency!

DEMO: https://hhg.link/re2020-tailwind-talk

Misconceptions about Tailwind

• "you don't have to know CSS to use it"
• "you cannot use a CSS-in-JS lib & Tailwind together"
• "you end up with a lot of unused classes in your app"

Some Final thoughts

Should you use it? 🤔

YES and NO... it all depends!

• show examples of real code using tailwind css (Mintter)
  • do you like to have all those classes on your HTML?
  • What is the level of expertise on CSS do you have? your team?
  • How much tide coupled is your current project to the actual CSS?

Other Solutions I like:

• https://modulz.app

• https://theme-ui.com

• https://rebassjs.org

• https://chakra-ui.com

• https://bulma.io

• https://reakit.io

• https://reacttraining.com/reach-ui/

• emotion

• styled-components...)

• ol' Plain CSS 😉 (of course!!)

References

• ✅ Tailwind Community page: https://tailwindcss.com/community

• ✅ tailwind Discord channel: https://discord.gg/qwxKNt

• ✅ awesome-tailwindcss: https://github.com/aniftyco/awesome-tailwindcss

• ✅ Tailwind UI: https://tailwindui.com

• ✅ Twitter Thread 1: https://hhg.link/tailwind-thread-1

• ✅ Twitter Thread 2: https://hhg.link/tailwind-thread-2

• ✅ Theming Tutorial (🇬🇧): https://hhg.link/tailwind-theming-en

• ✅ Theming Tutorial (🇪🇸): https://hhg.link/tailwind-theming-es

👋 THANKS!!

• Twitter

• Twitch

• Youtube

• Website

• This repo