redwoodjs
Cookbook: CSS integration
An #h2 section for each framework integration. Start with Tailwind but suggested additions:
- Linaria
- Style components
- React Bootstrap
- More to come
Oh this is something I just figured out in a project I made yesterday. Would love to contribute. I can try to write something for this over the next few weeks if helpful. Tailwind, Emotion, and CSS Modules should be quite easy. I've also been playing around with Chakra UI in Redwood, which is quite cool, but isn’t super straight forward if you want to use the baked in Redwood components like (like routing and forms).
@benjaminsehl Yes please! We actually just added a generator for hooking up Tailwind yarn rw g util tailwind so that section will be very easy. :) We'd love to get generators for the others as well.
@cannikin Yes I saw that! Hadn't read the docs recently, so I had literally just finished building an app where I found that original post you had linked to, completed it, and then refactored once I found the updated doc. But sounds great, I'll start working on a doc this weekend.
@benjaminsehl sounds great! I've assigned this issue to you. I encourage you to open a draft PR sooner than later even if just with outline stubs.
And because doc writing can become never-ending, don't hesitate to turn this into multiple steps if needed. We'll merge sections when they're ready one at a time if that works best.
Notes/links to help you out @benjaminsehl:
- the tailwind setup command is
yarn rw setup tailwind. note that we include setting up tailwind by hand in the webpack config docs, but don't touch on any kind of tailwind customization, like making your own utility class, etc. something like that could be a good candidate! - here's a long forum thread on CSS you can use as background into what people are thinking: https://community.redwoodjs.com/t/recommendations-for-integrating-a-css-library/305
- theme ui + redwoodjs: https://community.redwoodjs.com/t/how-to-use-theme-ui-with-redwoodjs/589
- linaria + rewdoodjs https://community.redwoodjs.com/t/how-to-use-linaria-css-in-js-with-redwoodjs/612
- a redwood favorite on styled components https://www.ibrahima-ndaw.com/blog/how-to-use-tailwind-styled-components/
- twin.macro integration https://community.redwoodjs.com/t/twin-macro-integration/1746
Feel free to pull as much or as little from these links; just wanted to make it easier to get started!
Just updated the CSS section on the awesome-redwood repo, this should be the most comprehensive collection of references to date.
CSS
- Recommendations for integrating a CSS library?
- Sass Setup
- Use Linaria CSS-in-JS
- Using Theme UI with RedwoodJS
Tailwind CSS
- Tailwind CSS Setup
- Upgrading to TailwindCSS v2
- Tailwind v0.36 Upgrade Guide
- Adding TailwindCSS to RedwoodJS
Twin.macro (warning, possibly broken)
- Twin.macro integration
- How to Style Your React Apps with Less Code Using Tailwind CSS, Styled Components, and Twin Macro
- Problems using twin.macro
