Add container utility class (default, centered & with padding)

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -635,6 +635,7 @@ exports[`getClassList 1`] = `
   "contain-size",
   "contain-strict",
   "contain-style",
+  "container",
   "content-around",
   "content-baseline",
   "content-between",

packages/tailwindcss/src/theme.ts

@@ -162,6 +162,8 @@ export type ThemeKey =
   | '--caret-color'
   | '--color'
   | '--columns'
+  | '--container-center'
+  | '--container-padding'
   | '--contrast'
   | '--cursor'
   | '--default-border-width'

packages/tailwindcss/src/utilities.test.ts

@@ -1522,6 +1522,109 @@ test('aspect-ratio', () => {
   ).toEqual('')
 })
 
+test('container', () => {
+  expect(run(['container'])).toMatchInlineSnapshot(`
+    ".container {
+      width: 100%;
+    }"
+  `)
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --breakpoint-sm: 640px;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'container',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --breakpoint-sm: 640px;
+    }
+
+    .container {
+      width: 100%;
+    }
+
+    @media (width >= 640px) {
+      .container {
+        max-width: 640px;
+      }
+    }"
+  `)
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --breakpoint-sm: 640px;
+          --container-center: 1;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'container',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --breakpoint-sm: 640px;
+      --container-center: 1;
+    }
+
+    .container {
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    @media (width >= 640px) {
+      .container {
+        max-width: 640px;
+      }
+    }"
+  `)
+  expect(
+    compileCss(
+      css`
+        @theme {
+          --breakpoint-sm: 640px;
+          --container-center: 0;
+          --container-padding: 1rem;
+          --container-padding-sm: 2rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'container',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --breakpoint-sm: 640px;
+      --container-center: 0;
+      --container-padding: 1rem;
+      --container-padding-sm: 2rem;
+    }
+
+    .container {
+      width: 100%;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    @media (width >= 640px) {
+      .container {
+        max-width: 640px;
+        padding-left: 2rem;
+        padding-right: 2rem;
+      }
+    }"
+  `)
+})
+
 test('size', () => {
   expect(
     compileCss(

packages/tailwindcss/src/utilities.ts

@@ -886,6 +886,31 @@ export function createUtilities(theme: Theme) {
     handle: (value) => [decl('aspect-ratio', value)],
   })
 
+  {
+    // container
+    const containerNodes: ([string, string] | (() => AstNode))[] = [['width', '100%']]
+    if (theme.get(['--container-center']) === '1') {
+      containerNodes.push(['margin-right', 'auto'])
+      containerNodes.push(['margin-left', 'auto'])
+    }
+    const defaultPadding = theme.get(['--container-padding'])
+    if (defaultPadding !== null) {
+      containerNodes.push(['padding-right', defaultPadding])
+      containerNodes.push(['padding-left', defaultPadding])
+    }
+    const containerPaddings = theme.namespace('--container-padding')
+    Array.from(theme.namespace('--breakpoint'), ([name, width]) => {
+      const breakpointNodes: AstNode[] = [decl('max-width', width)]
+      if (containerPaddings.has(name)) {
+        const padding = containerPaddings.get(name)!
+        breakpointNodes.push(decl('padding-right', padding))
+        breakpointNodes.push(decl('padding-left', padding))
+      }
+      containerNodes.push(() => rule(`@media (width >= ${width})`, breakpointNodes))
+    })
+    staticUtility('container', containerNodes)
+  }
+
   /**
    * @css `size`
    * @css `width`

packages/tailwindcss/theme.css

@@ -16,6 +16,18 @@
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px;
 
+  /* Container */
+  /* Uncomment if you'd like to center your containers by default */
+  /* --container-center: 1;  */
+  /* Uncomment to add horizontal padding by default */
+  /* --container-padding: 1rem; */
+  /* Uncomment to specify a different padding amount for each breakpoint */
+  /* --container-padding-sm: 2rem; */
+  /* --container-padding-md: 3rem; */
+  /* --container-padding-lg: 4rem; */
+  /* --container-padding-xl: 5rem; */
+  /* --container-padding-2xl: 6rem; */
+
   /* Colors */
   --color-black: #000;
   --color-white: #fff;