Discussion: best way add CSS to React/Next.js projects?

Current situation

At the company I work for, we currently have a lot of projects which work with Bootstrap to style the website.
Since we don't want to include the jQuery dependency to use the out-of-the-box components (like dropdowns, accordions, ...), we then use react-bootstrap to build (parts of) our UI.

Problems with current situation

As we try to focus on performance/speed of our websites as much as possible, we are trying to limit the CSS that is being included on every page.
The problem with our current setup is that we have 1 entry point (main.scss) where we import all the bootstrap SCSS we need (so we do only include the parts we need), and include all our custom SCSS.
As you can imagine the output CSS file's size is quite big.

Possible solutions

1. We tried to use CSS purge to purge all the unused CSS, but we noticed that too much CSS was being deleted from the final output file.
   This is caused by react-bootstrap which obfuscates the Bootstrap classes is uses (they are not present in the JSX we write).
   I didn't find a good solution to overcome this problem, so any suggestions here are very welcome!

2. We tried working with SCSS modules to include only the needed SCSS in our components. This caused some problems with missing Bootstrap variables/mixins/functions. This causes a lot of code repetition, and the "general" Bootstrap still gets included on every page.

3. We tried working with Tailwind CSS. This caused a much smaller output CSS file because it can easily be purged. We combined this with SCSS modules where needed. The problem here is that we don't have a library with pre-built components with Tailwind like we do with react-bootstrap (unless I'm missing something?).

What setup are you using?

I know CSS in JS is also an option to only include the relevant CSS on your pages, but the same question here as with Tailwind CSS, do you have a library with pre-built components?

Or don't you use pre-built components and have a custom component library which you re-use in every project?

Happy to hear your opinion/setup!

Comments

[Horstcredible]

Hello Thomas,

well, there are some Tailwind component libraries out there overcompiled.com/blog/0003-tailwin....

Also, we use Styled components in some of our companies products.
You can simply take any component from any library and apply styles with styled components to it.
I haven't used tailwind much at all, but could imagine you can use it in a similar way.

Cheers.

[Thomas Ledoux]

Thanks for your reply!
The list is certainly handy :)
If we'd have some unstyled components we could indeed style them ourselves with Styled components, but it would be even better with a component library that styles them for you.
But that has some other negative effects of course..

[CristianCC]

Right sometimes using Tailwind I find myself styling the some components over and over again where I could use a component library and get a boost in productivity. Lately I have been using Chakra UI because of the great set of components out of the box it provides and every component can received styled props (margin, paddings, etc) so you rarely have to write custom CSS with other solution. And It's tree-shakable so it should remove all code except the code you use. A really good combination with NextJS

[Thomas Ledoux]

Great! Thanks for the tip. I’ll check out Chakra UI first thing tomorrow

[sid]

Have you tried headless UI

[Thomas Ledoux]

I haven't yet, because there are only 8 components there at the moment.
But might be good to compare to Chakra UI too.
Thanks for the tip!