search

tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.28k stars 4.22k forks source link

Reintroduce `container` component as a utility #14993

Closed philipp-spiess closed 1 week ago

philipp-spiess commented 1 week ago

Closes #13129

We're adding back the v3 container component, this time as a utility. The idea is that we support the default container behavior but we will not have an API to configure this similar to what v3 offered. Instead, the recommended approach is to configure it by creating a custom utility like so:

@import "tailwindcss";

@utility container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

We do have an idea of how to migrate existing JS configuration files to the new @utility as part of the interop layer and the codemod. This is going to be a follow-up PR though.

Test Plan

We added a unit test but we've also played around with it in the Vite playground. Yep, looks like a container:

https://github.com/user-attachments/assets/ea7a5a4c-4cde-4ef5-9062-03e16239eb85