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.
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.
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!
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.
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?).
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!