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

[Deven14125]

Part of #8047

Description

This PR migrates the Container component styles from SCSS to Tailwind CSS.

Changes Made

• Replaced SCSS-based styling with Tailwind utility classes
• Removed Container.scss file and its import
• Updated Container layout using Tailwind:
• Updated snapshot tests to reflect new class names
• Adjusted Footer component to align with updated Container width

Testing

• Verified Container renders correctly with and without custom className
• Ensured layout consistency across pages using Container
• Updated and validated snapshot tests

Notes

• Maintained existing component structure
• Tailwind classes were chosen to closely match previous SCSS behavior
• This is part of the incremental migration from SCSS to Tailwind CSS

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
webpack-js-org	Ready	Preview, Comment	Mar 23, 2026 11:39am

[Copilot]

Pull request overview

Migrates the Container component from SCSS-based styling to Tailwind utility classes, updating dependent layout/snapshots to reflect the new class names and widths.

Changes:

• Replaced Container.scss usage with Tailwind classes in Container.jsx and removed the SCSS file.
• Updated Container snapshots to match the new rendered class attribute.
• Adjusted Footer container width utilities to align with the updated Container sizing.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
src/components/Footer/Footer.jsx	Updates the Container wrapper width utilities in the footer layout.
src/components/Container/snapshots/Container.test.jsx.snap	Updates snapshots to reflect Tailwind-based class names.
src/components/Container/Container.scss	Removes legacy SCSS styles for .container.
src/components/Container/Container.jsx	Replaces .container class with Tailwind utilities for width/centering.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Using a template literal with ${className} causes an extra trailing space in the rendered class attribute when className is empty (visible in the updated snapshot). Consider joining class names conditionally (or trimming) to avoid unnecessary whitespace and snapshot churn.

[Copilot]

Removing the container CSS class from the Container root breaks existing SCSS selectors that rely on it (e.g. src/components/Splash/Splash.scss targets .splash__section .container for padding). Consider keeping a stable container class on this element for backward compatibility, or update the remaining SCSS/call sites that depend on .container to use Tailwind utilities instead.

Suggested change

	<div className={`w-full max-w-5xl mx-auto ${className}`}>
	<div className={`container w-full max-w-5xl mx-auto ${className}`}>

[Copilot]

Container now already applies max-w-5xl mx-auto, so adding mx-auto max-w-5xl again at the call site is redundant and makes it easier for these to drift out of sync later. Suggest dropping those two utilities from this className (keep the padding/typography utilities) and let Container own the width/centering.

Suggested change

	<Container className="mx-auto max-w-5xl px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">
	<Container className="px-5 pb-[30px] pt-[40px] text-center [&_a]:text-[#3b7eb5]">

[alexander-akait]

We already have a PR for this - #8098, please before sending a PR check if we already have it to avoid duplication