Add codemod and interop for legacy container component configu

[philipp-spiess]

This PR adds support for handling v3 container customizations . 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

/** @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

@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:

Screen.Recording.2024-11-14.at.17.09.39.mov