mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
890f18de93
This PR adds support for handling v3 [`container` customizations ](https://tailwindcss.com/docs/container#customizing). This is done by adding a custom utility to extend the core `container` utility. A concrete example can be taken from the added integration test. ### Input ```ts /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.html'], theme: { container: { center: true, padding: { DEFAULT: '2rem', '2xl': '4rem', }, screens: { md: '48rem', // Matches a default --breakpoint xl: '1280px', '2xl': '1536px', }, }, }, } ``` ### Output ```css @import "tailwindcss"; @utility container { margin-inline: auto; padding-inline: 2rem; @media (width >= theme(--breakpoint-sm)) { max-width: none; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 1280px) { max-width: 1280px; } @media (width >= 1536px) { max-width: 1536px; padding-inline: 4rem; } } ```` ## Test Plan This PR adds extensive tests to the compat layer as part of unit tests. Additionally it does at a test to the codemod setup that shows that the right `@utility` code is generated. Furthermore I compared the implementation against v3 on both the compat layer and the custom `@utility`: https://github.com/user-attachments/assets/44d6cbfb-4861-4225-9593-602b719f628f