Skip to content

refactor(Container): migrate from SCSS to Tailwind CSS #8098

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexander-akait merged 4 commits into from
Mar 23, 2026
Merged

refactor(Container): migrate from SCSS to Tailwind CSS #8098

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6cb5b9b
refactor(Container): migrate from SCSS to Tailwind CSS
mr-baraiya Mar 22, 2026
ae03773
test(Container): update snapshots after Tailwind migration
mr-baraiya Mar 22, 2026
42c12fa
refactor(Container): replace hardcoded max-width with Tailwind utility
mr-baraiya Mar 23, 2026
b2fb657
test(Container): update snapshots after Tailwind change
mr-baraiya Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/components/Container/Container.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import PropTypes from "prop-types";

import "./Container.scss";
// Tailwind CSS is now used for styling. Custom SCSS removed.

export default function Container(props = {}) {
const { className = "" } = props;

return <div className={`container ${className}`}>{props.children}</div>;
return (
<div className={`w-full max-w-[1024px] mx-auto ${className}`}>
Copy link
Copy Markdown
Contributor

@rahul-kr-rai rahul-kr-rai Mar 22, 2026

Choose a reason for hiding this comment

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

Why do we need max-w-[1024px], Can we use Tailwind's built-in utility class instead of hardcoding?

{props.children}
</div>
);
}

Container.propTypes = {
Expand Down
9 changes: 0 additions & 9 deletions src/components/Container/Container.scss
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/components/Container/__snapshots__/Container.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Container renders correctly with children and className 1`] = `
<div
class="container test-class"
class="w-full max-w-[1024px] mx-auto test-class"
>
<p>
Child content
Expand All @@ -12,7 +12,7 @@ exports[`Container renders correctly with children and className 1`] = `

exports[`Container renders correctly without className 1`] = `
<div
class="container "
class="w-full max-w-[1024px] mx-auto "
>
<span>
Simple child
Expand Down
Loading