Skip to content

refactor(Cube): migrate from SCSS to Tailwind CSS - #8060

Closed
mr-baraiya wants to merge 6 commits into
webpack:mainfrom
mr-baraiya:feature/cube-tailwind
Closed

refactor(Cube): migrate from SCSS to Tailwind CSS#8060
mr-baraiya wants to merge 6 commits into
webpack:mainfrom
mr-baraiya:feature/cube-tailwind

Conversation

@mr-baraiya

Copy link
Copy Markdown
Contributor

Summary

This PR migrates the Cube component from SCSS to Tailwind CSS as part of the effort described in #8047.

The goal is to gradually reduce SASS usage and move towards Tailwind-based styling.
In this PR:

  • Replaced SCSS styles with Tailwind utility classes
  • Removed the Cube.scss file
  • Preserved the existing UI and behavior of the component

What kind of change does this PR introduce?
refactor


Did you add tests for your changes?
No


Does this PR introduce a breaking change?
No


If relevant, what needs to be documented once your changes are merged or what have you already documented?
No

@vercel

vercel Bot commented Mar 19, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
webpack-js-org Ready Ready Preview, Comment Mar 19, 2026 0:37am

Request Review

Comment thread src/components/Cube/Cube.jsx Outdated
key={i}
className="cube__face"
className={
"absolute bg-transparent border-solid border-gray-400" +

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please fix lint problems

@mr-baraiya

Copy link
Copy Markdown
Contributor Author

Fixed the lint issues.

const variantClasses = isOuter
? "border bg-blue-200/50 transition-[border-width] duration-200 delay-200"
: "border-2 bg-blue-400";

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this was removed?

{this._getFaces("outer")}
</figure>
<figure
className="cube__inner absolute -top-[2px] left-0 inline-block [transform-style:preserve-3d] transition-transform duration-1000"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot of classes were removed which are already tailwind

}}
>
<figure
className="cube__outer inline-block [transform-style:preserve-3d] transition-transform duration-1000"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot of classes were removed which are already tailwind

>
<span
ref={(ref) => (this.container = ref)}
className={`cube cube--${theme} relative block [transform-style:preserve-3d]`}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where transform-style:preserve-3d?

@alexander-akait

Copy link
Copy Markdown
Member

@mr-baraiya

Copy link
Copy Markdown
Contributor Author

Looks like this change has already been implemented and merged in another PR.

Closing this PR to avoid duplication. Thanks for the review!

@mr-baraiya mr-baraiya closed this Mar 19, 2026
@mr-baraiya
mr-baraiya deleted the feature/cube-tailwind branch March 19, 2026 14:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants