Suggestion: Online tool to download copy-pastable style declarations with all CSS vars resolved

[ThomasLandauer]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

I'm suggesting an online tool that lets you enter a single class name (e.g. .card), and then returns the full declaration of that class with all CSS var(--...) resolved to their actual values.

Motivation and context

Sometimes it's not handy (or possible) to include the entire bootstrap.css file, e.g. I just recommended to include just the needed CSS classes for PDF creation with dompdf: https://github.com/dompdf/dompdf/wiki/Common-Use-Cases#using-css-frameworks-like-bootstrap-or-tailwind

[julien-deramond]

Just out of curiosity, since it's related to this feature request, have you considered using Sass optimizations to specify which parts of Bootstrap are being included?
Additionally, tools like PurgeCSS can help remove unused CSS, which we generally recommend as a best practice.
Of course, we understand this might not be feasible in every scenario, but it's usually a helpful approach.

[ThomasLandauer]

For now, I solved it by manually copying the ~10 :root variables; now the ~5 classes I copied out of Bootstrap are working.

However, an "official" tool would certainly be nice ;-)

[BlackRose104]

Hey Thomas 👋 I really like your idea, and I totally get the need for this kind of tool when you're trying to keep things lean for projects like dompdf.

Just wanted to mention, while it would be amazing to have an official Bootstrap tool, you don’t have to wait for the open source team to build it (they already have a lot on their plate). you can actually use ChatGPT to accomplish this right now. There’s a feature called Projects where you can upload files like bootstrap.css, and GPT will go through them with you. You can then ask it to extract specific class definitions, resolve var(--...) values, and even generate a clean output for just the components you need, or just paste the class name like .card, and ask it to resolve all the CSS variables to actual values based on the latest Bootstrap release. It’s surprisingly accurate and super handy for quick copy-paste use. Its useful for exactly the kind of work you're doing.

Might save you a lot of time, and no need to wait for an official tool. 😉