mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
container component as a utility (#14993)
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: ```css @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 --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.
Description
Languages
JavaScript
90.6%
CSS
7.6%
HTML
1.7%