refactor: tailwind spacings #1082
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JammingBen
force-pushed
the
refactor/manual-spacings-tailwind
branch
from
c93c6ee to
e8546af
Compare
JammingBen
force-pushed
the
feat/tailwind
branch
from
ccb831f to
9c87de6
Compare
JammingBen
force-pushed
the
refactor/manual-spacings-tailwind
branch
from
cb4a0ff to
8315972
Compare
Some could be removed completely because those are already being handled via the Tailwind preflight. Others are now implemented via utility classes. A few of them need to stay as they are because they overwrite styles from vendors e.g.
Removes unnecessary margins and a few unused classes, migrates the rest to either utility classes or layers. A few rare occasions can still be found, they will either be resolve later, or are necessary because they overwrite e.g. vendor styles.
Removes unnecessary paddings and a few unused classes, migrates the rest to either utility classes or layers. A few rare occasions can still be found, they will either be resolve later, or are necessary because they overwrite e.g. vendor styles.
With tailwind, there is no need for this to be a dedicated component of the design-system. Just use tailwind classes if you need a grid. It was only being used once (for whatever reason, it wasn't even necessary).
Gives icons a content box sizing to ensure they align well.
JammingBen
force-pushed
the
refactor/manual-spacings-tailwind
branch
6 times, most recently
from
7f994db to
fa337a6
Compare
JammingBen
force-pushed
the
refactor/manual-spacings-tailwind
branch
from
fa337a6 to
420bb7f
Compare
Contributor
There was a problem hiding this comment.
Pull Request Overview
This pull request refactors manual CSS spacing (margin and padding) throughout the codebase to use Tailwind utility classes. The goal is to migrate from custom CSS spacing properties to a standardized Tailwind-based approach while maintaining the existing visual appearance.
- Replaces manual
margin:andpadding:CSS with Tailwind utility classes - Updates test snapshots to reflect the new Tailwind class names
- Adds new breakpoint definitions to the Tailwind theme configuration
Reviewed Changes
Copilot reviewed 143 out of 144 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
packages/web-runtime/src/tailwind.css |
Added new breakpoint definitions for responsive design |
| Multiple test snapshots | Updated to reflect new Tailwind spacing classes in component outputs |
| Various Vue components | Replaced manual CSS spacing with Tailwind utility classes |
| CSS/SCSS files | Removed manual spacing rules in favor of Tailwind utilities |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
To ensure they can be overwritten with utility classes.
openclouders
pushed a commit
that referenced
this pull request
Aug 18, 2025
…ailwind refactor: tailwind spacings
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Migrates manual spacings via
margin:andpadding:to either Tailwind utility classes or CSS layers. Some could even be removed (especially setting them to 0 is often unnecessary now because the Tailwind preflight already sets them to 0).With this change, the spacings in the UI should look pretty much exactly like before Tailwind.
Also removes the
OcGridcomponent (not needed anymore) and introduces our mobile breakpoints in Tailwind.Best to review this by commits.
refs #937