1. Tailwind CSS
2. React Query
3. Demo
Part 1
Tailwind
But First...
Bootstrap
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530428/pasted-from-clipboard.png)
Bootstrap
Bootstrap CSS classes represent "Components" comprised of multiple styles
(rounded corners, background, color, hover)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530352/pasted-from-clipboard.png)
Bootstrap
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530356/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530357/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530358/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530365/pasted-from-clipboard.png)
Bootstrap is great!
So what's wrong with bootstrap?
- "It looks like bootstrap" - designers
- customization can be complex
- opinionated
- third party implementations for react, ng, etc (because of JS)
What's Tailwind
Tailwind takes utility classes all the way
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530350/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530369/pasted-from-clipboard.png)
Here's what that looks like:
Ugh, but all those classes!
You'll get over it
Controlling File Size
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530372/pasted-from-clipboard.png)
Controlling File Size
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530373/pasted-from-clipboard.png)
Purgable HTML
- Don't use templates for classnames
- React classnames library helps
Development
Use the classname editor instead of the style editor
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530375/pasted-from-clipboard.png)
Development
Reference docs for classnames
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530392/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530396/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530399/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530405/pasted-from-clipboard.png)
Learn more at tailwindcss.com
Tailwind
What's the abstraction?
Tailwind is a low level abstraction over writing plain css
benefit: fast, easy, intuitive, more flexible than bootstrap, built in "purge" for small file size
costs: discourages (but doesn't prevent) direct interaction with css
Intermission
Part 2
React Query
Oh look, It's another state management thing
(Nice)
Why is (client-side) state management so important?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530470/pasted-from-clipboard.png)
Traditional Server Side Rendering
Client side single page app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530473/pasted-from-clipboard.png)
JS State Management Libraries
- Keep state in one or more "stores" (state tree / object)
- Mutate (change) state
- Update components when state changes
vue x, React Context
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549925/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549926/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549930/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549004/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549007/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549008/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549938/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7530473/pasted-from-clipboard.png)
state management
or cache management?
React Query
By the author of react table
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549871/pasted-from-clipboard.png)
Text
React Query
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549873/pasted-from-clipboard.png)
React Query
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549895/pasted-from-clipboard.png)
React Query
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549954/pasted-from-clipboard.png)
Also check out SWR
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7549972/pasted-from-clipboard.png)
React Query
What's the abstraction?
React query is a high level abstraction over local state management patterns concerned with http caching.
benefit: simple api, consistent data fetching and caching, may reduce need for dedicated state management libraries in some apps
Demo Todo List App
Demo Todo List App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7550026/pasted-from-clipboard.png)
Demo Todo List App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/7550032/pasted-from-clipboard.png)
taiwind + react query
By gpspake
taiwind + react query
- 900