migrate SplashViz component to Tailwind CSSFeature/migrate splashviz tailwind#8128
Conversation
- Replaced existing SCSS with Tailwind utility classes - Removed SplashViz.scss and its imports - Kept the layout and responsiveness consistent with the original
Removed import statement for SplashViz.scss.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Migrates the SplashViz component styling from Sass to Tailwind utilities to support the ongoing effort to reduce Sass usage (issue #8047).
Changes:
- Removed the
SplashViz.scssstylesheet and its import from the component. - Replaced previous BEM/Sass-driven layout rules with Tailwind utility classes (including responsive variants and arbitrary values).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/components/SplashViz/SplashViz.jsx | Replaces SCSS-based layout/styling with Tailwind utility classes and responsive variants. |
| src/components/SplashViz/SplashViz.scss | Deletes the now-redundant SCSS stylesheet. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| h-[clamp(35rem,calc(100vh-80px),45rem)] | ||
| max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] | ||
| max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)]"> |
There was a problem hiding this comment.
The calc() expressions inside the Tailwind arbitrary values omit required whitespace around the - operator (e.g., calc(100vh-80px)). In CSS, calc() operators must be surrounded by spaces, otherwise the whole calc()/clamp() declaration can be dropped, breaking the height/min-height rules.
| h-[clamp(35rem,calc(100vh-80px),45rem)] | |
| max-lg:h-[clamp(30rem,calc(100vh-80px),35rem)] | |
| max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)]"> | |
| h-[clamp(35rem,calc(100vh - 80px),45rem)] | |
| max-lg:h-[clamp(30rem,calc(100vh - 80px),35rem)] | |
| max-[425px]:min-h-[clamp(40rem,calc(100vh - 80px),50rem)]"> |
| return ( | ||
| <section className="splash-viz dark:bg-gray-900!"> | ||
| <h1 className="splash-viz__heading"> | ||
| <section className="splash-viz relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900! |
There was a problem hiding this comment.
p-4 pb-16 changes the effective bottom padding compared to the removed SCSS: in SplashViz.scss, padding-bottom: 4rem; is immediately overridden by padding: 1rem; (so bottom padding ends up 1rem). If the goal is a pixel-perfect migration, this should be reconciled (either drop pb-16 to match the old output, or adjust the old intent explicitly).
| <section className="splash-viz relative grid grid-rows-[auto_1fr] overflow-hidden p-4 pb-16 bg-[#2b3a42] dark:bg-gray-900! | |
| <section className="splash-viz relative grid grid-rows-[auto_1fr] overflow-hidden p-4 bg-[#2b3a42] dark:bg-gray-900! |
| max-[425px]:min-h-[clamp(40rem,calc(100vh-80px),50rem)]"> | ||
|
|
||
| <h1 className="splash-viz__heading mt-[80px] row-start-1 row-end-2 text-center font-extralight text-white | ||
| text-[2rem] lg:text-[2.5rem] lg:mt-[90px]"> |
There was a problem hiding this comment.
The responsive breakpoint for the heading was @include break in the removed SCSS, which maps to min-width: 768px ($screens.medium). The Tailwind classes use lg: (1024px), so the larger font size / 90px top margin will apply later than before; use the md: breakpoint if you want to preserve the original behavior.
| text-[2rem] lg:text-[2.5rem] lg:mt-[90px]"> | |
| text-[2rem] md:text-[2.5rem] md:mt-[90px]"> |
|
|
||
| <div | ||
| className="splash-viz__modules" | ||
| className="splash-viz__modules absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[1200px] m-auto -translate-x-1/2 -translate-y-1/2 hidden lg:block row-start-2 row-end-3" |
There was a problem hiding this comment.
The .splash-viz__modules sizing/breakpoint doesn’t match the removed SCSS: @include break shows it at min-width: 768px (Tailwind md:), and max-width was $screens.medium (768px). The new hidden lg:block max-w-[1200px] will keep it hidden until 1024px and allow it to grow much wider than before, which changes layout on tablets/desktop.
| className="splash-viz__modules absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[1200px] m-auto -translate-x-1/2 -translate-y-1/2 hidden lg:block row-start-2 row-end-3" | |
| className="splash-viz__modules absolute top-1/2 left-1/2 w-[60vw] min-w-[550px] max-w-[768px] m-auto -translate-x-1/2 -translate-y-1/2 hidden md:block row-start-2 row-end-3" |
Updated the SplashViz component to adjust class names and improve responsiveness.
|
Fixed by #8127, please double check existing PRs before sending a new one, thanks |
SummaryThis PR addresses issue #8047 by migrating the SplashViz component from Sass to Tailwind CSS.
Motivation:
As part of the organization's move toward a utility-first styling approach, this change reduces the project's dependency on custom Sass files, making the codebase more maintainable and consistent with the new design system.
Changes:
Replaced custom SCSS classes in src/components/SplashViz/SplashViz.jsx with Tailwind utility classes.
Deleted redundant styles in src/components/SplashViz/SplashViz.scss.
Implemented responsive design logic using Tailwind's lg: and arbitrary value breakpoints to match the original media queries.
Verified that the 3D Cube animation and TextRotator logic remain fully functional.
What kind of change does this PR introduce?
style (Refactor)
Did you add tests for your changes?
No. This is a CSS-only refactor that does not change component logic. I have visually verified the layout and responsiveness on a local development server.
Does this PR introduce a breaking change?
No.
If relevant, what needs to be documented once your changes are merged?
N/A. This is an internal styling refactor.
Use of AI
I used Google Gemini to assist in mapping the complex Sass clamp() functions and CSS Grid properties to the equivalent Tailwind arbitrary value syntax. This ensured the layout remained pixel-perfect while transitioning to the utility-first framework.