diff --git a/src/components/Container/Container.jsx b/src/components/Container/Container.jsx
index 25e070c9b917..d468a8b88438 100644
--- a/src/components/Container/Container.jsx
+++ b/src/components/Container/Container.jsx
@@ -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-screen-lg mx-auto ${className}`}>
+      {props.children}
+    </div>
+  );
 }
 
 Container.propTypes = {
diff --git a/src/components/Container/Container.scss b/src/components/Container/Container.scss
deleted file mode 100644
index d6a533edbb1b..000000000000
--- a/src/components/Container/Container.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use "../../styles/partials/vars" as *;
-@use "../../styles/partials/mixins" as *;
-@use "sass:map";
-
-.container {
-  width: 100%;
-  max-width: map.get($screens, large);
-  margin: 0 auto;
-}
diff --git a/src/components/Container/__snapshots__/Container.test.jsx.snap b/src/components/Container/__snapshots__/Container.test.jsx.snap
index 389c2266dbb6..332bbb71e45c 100644
--- a/src/components/Container/__snapshots__/Container.test.jsx.snap
+++ b/src/components/Container/__snapshots__/Container.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Container renders correctly with children and className 1`] = `
 <div
-  class="container test-class"
+  class="w-full max-w-screen-lg mx-auto test-class"
 >
   <p>
     Child content
@@ -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-screen-lg mx-auto "
 >
   <span>
     Simple child