No description
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 |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.workspace.ts | ||
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.