just-andy-1888
KPCKevin Powell - Community
•Created by just-andy-1888 on 10/22/2024 in #front-end
How to create responsive utility classes in SCSS like Tailwind/Bootstrap?
I am working on a CSS library for our Design System. It contains a wide set of utility classes, similar to those of Tailwind and Bootstrap.
We are using SCSS to manage our CSS, which is separated similarly to Kevin's Beyond CSS course.
I am stuck creating utility classes with a prefix to determine how they should be presented at specific breakpoints.
// Example
<div class=" display-flex md:display-grid">...</div>
In this example, the display property would be flexbox up until the medium breakpoint, it then becomes a grid.
Tailwind Example: https://tailwindcss.com/docs/responsive-design
Bootstrap Example: https://tailwindcss.com/docs/responsive-design
Where I am stuck is how best to structure and use SCSS to consistently apply these to each of our properties?3 replies