Theme-ui: Comparsion with TailwindCSS?

Created on 9 Dec 2019 · 3Comments · Source: system-ui/theme-ui

Hi there,

This project looks great. I am currently using TailwindCSS.
And I found this project which looks interesting.

I am just curious, does theme-ui enable extra features that Tailwind doens't have? Is there a pattern that's possible with theme-ui and not possible with TailwindCSS?

I am aware that theme-ui takes CSS-in-JS approach, I am wondering if theme-ui has additional advantages?

Source

muhajirdev

👍1

Most helpful comment

In addition to what @jferrettiboke said, it's worth noting that Tailwind is a derivative of our earlier work in Basscss and Tachyons (circa 2013) and borrows a lot of the same ideas that we've pioneered with atomic/functional/utility based CSS and theme scales. While I think utility-based CSS solutions are great for legacy apps, built with frameworks like Rails, they aren't really intended or built with a React-first mindset.

Theme UI is the culmination of years of work in this space and is built specifically for React and component-based UIs, whereas libraries like Tailwind are not. We have more features and integrations that we're planning on launching in the future, which will hopefully make the value proposition a bit more clear

jxnblk on 10 Dec 2019

👍12 🎉3 🚀2 ❤2 👀1

All 3 comments

I have used TailwindCSS too. You can do the same with both of them but in totally different ways. However, I found some important points based on my experience.

My biggest frustration with Tailwind is the CSS file size. I know you can control this but even doing it, you will end up with the same CSS file across multiple pages. I prefer to use a CSS-in-JS solution to take advantage of code splitting per page since I use a serverless approach.

Another frustration that I have with Tailwind is when I create a React component and I give some classes to style it, but then I need to extend it with other classes from another part of the app. This is a pain, since classes can or cannot do what you expect due to the inheritance of the CSS, and you will end up with some logic in order to use a specific CSS class.

What I find cool using Theme UI is how easy is to have light/dark modes. This requires more work using Tailwind.

Being said that, Tailwind is a great choice. I can write faster CSS with Tailwind than any other JS-in-CSS existing solution, but if you are using React to style all your components, you will probably get to any of the situations that I described earlier.

Note that Tailwind is a CSS solution and if you would want to migrate from React to another library or framework in the future, your CSS components styled with Tailwind will probably just work.

There is no silver bullet. Both of them are great choices. If you want to have light/dark mode, extend styles and leverage code splitting in your apps, I think you could want to use a CSS-in-JS solution and Theme UI is a great choice there.