feat: add tailwindcss and replace oc-m/p classes#1073
Merged
JammingBen merged 12 commits intomainfrom Aug 18, 2025
Merged
Conversation
JammingBen
force-pushed
the
feat/tailwind
branch
7 times, most recently
from
0f90eaa to
8135876
Compare
JammingBen
changed the title
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR introduces Tailwind CSS and replaces the existing custom margin and padding utility classes with Tailwind equivalents. The change aims to modernize the styling system by transitioning from custom oc-m and oc-p classes to Tailwind's standardized utility classes.
Key Changes:
- Added Tailwind CSS configuration and integration to the build system
- Replaced custom margin/padding classes (
oc-m-*,oc-p-*) with Tailwind equivalents (m-*,p-*) - Updated test snapshots to reflect the new class names
Reviewed Changes
Copilot reviewed 237 out of 238 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Added Tailwind CSS plugin and build configuration |
| packages/web-runtime/src/tailwind.ts | Entry point for Tailwind CSS imports |
| packages/web-runtime/src/tailwind.css | Tailwind CSS configuration with custom spacing |
| Various .vue files | Updated class names from custom utilities to Tailwind equivalents |
| Test snapshot files | Updated snapshots to reflect new Tailwind class names |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
JammingBen
force-pushed
the
feat/tailwind
branch
from
08bf043 to
ccb831f
Compare
kulmann
reviewed
Aug 14, 2025
Also replaces the `oc-m/p-rm` classes with their Tailwind equivalent.
JammingBen
force-pushed
the
feat/tailwind
branch
from
ccb831f to
9c87de6
Compare
openclouders
pushed a commit
that referenced
this pull request
Aug 18, 2025
feat: add tailwindcss and replace oc-m/p classes
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
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.
Introduces Tailwind CSS.
Also replaces our margin and padding utility classes with Tailwind ones. The overall feel and look of the UI should be roughly the same as before. Maybe you'll find some minor differences in spacing due to them being more streamlined and many parts still missing.
The next step is to remove all margins and paddings from custom css and replace them with either Tailwind utility classes or by moving them to Tailwind's layer system.
The design-system docs also need some more work, I didn't get it to run well with Tailwind so far. Needs some more investigation and a follow-up PR.
Migration
oc-m-xs>m-1oc-m-s>m-2oc-m-m>m-4oc-m-l>m-6oc-m-xl>m-12oc-m-xxl>m-24oc-m>m-4oc-m-rm>m-0refs #937