tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.28k stars 4.22k forks source link

Add codemod and interop for legacy `container` component configu #14999

Closed philipp-spiess closed 1 week ago

philipp-spiess commented 1 week ago

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:

https://github.com/user-attachments/assets/44d6cbfb-4861-4225-9593-602b719f628f