Skip to content

Conversation

@philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Nov 13, 2024

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:

Screen.Recording.2024-11-13.at.17.43.08.mov

@philipp-spiess philipp-spiess marked this pull request as ready for review November 13, 2024 16:50
@philipp-spiess philipp-spiess requested a review from a team as a code owner November 13, 2024 16:50
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
@philipp-spiess philipp-spiess changed the title Add container utility that mimics the v3 container component Reintroduce container component as a utility Nov 13, 2024
@adamwathan adamwathan merged commit dd85aad into next Nov 13, 2024
1 check passed
@adamwathan adamwathan deleted the feat/container-component-compat branch November 13, 2024 18:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[v4] Styles are not applied to the "container" class

4 participants