Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: tailwindlabs/tailwindcss
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v4.1.0
Choose a base ref
...
head repository: tailwindlabs/tailwindcss
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v4.1.1
Choose a head ref
  • 4 commits
  • 29 files changed
  • 2 contributors

Commits on Apr 1, 2025

  1. Disable padding in @source inline(…) brace expansion (#17491)

    The padding code we had was incorrect as it would always pad on the
    largest string representation. So for an input like this:
    
    
    ```
    @source inline("z-{10..100..10}");
    ```
    
    It would create the following candidates: 
    
    - `z-010`
    - `z-020`
    - `z-030`
    - `z-040`
    - `z-050`
    - `z-060`
    - `z-070`
    - `z-060`
    - `z-070`
    - `z-100`
    
    Instead of fixing the padding logic we realized that Tailwind utilities
    don't need padding at all so this PR removes this feature
    
    ## Test plan
    
    - Added the following to the Vite playground: `@source
    inline("z-{10..100..10}");`
    - Ensure it works: 
    
    ![image](https://github.com/user-attachments/assets/f4714729-4ef7-4678-a531-70b471e75e6e)
    philipp-spiess authored Apr 1, 2025
    Configuration menu
    Copy the full SHA
    b069d7a View commit details
    Browse the repository at this point in the history

Commits on Apr 2, 2025

  1. Inject polyfills after @import and body-less @layer (#17493)

    This PR fixes an issue where polyfills were injected at the top, but
    they should be after `@import` and body-less `@layer` rules.
    
    This is necessary in case you are using Google fonts like this for
    example:
    ```css
    @import url('https://fonts.google.com');
    @import "tailwindcss";
    ```
    
    While the `@import url(…);` sits above `@import "tailwindcss";` in the
    final generated CSS we injected the polyfills at the very beginning.
    
    This PR will inject the polyfills after the first AST Node that is not:
    1. A comment
    2. An external import — `@import url(…)`
    3. A body-less layer — `@layer foo, bar, baz;`
    
    The snapshots look a little confusing, but that's because Lightning CSS
    is optimizing the output and moving things around a bit:
    
    <img width="1482" alt="image"
    src="https://github.com/user-attachments/assets/a0552c8b-93df-4e1d-ad90-8b8abf9492b1"
    />
    
    [Lightning CSS
    Playground](https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%40layer%20theme%2C%20base%2C%20components%2C%20utilities%3B%5Cn%5Cn%40supports%20(((-webkit-hyphens%3A%20none))%20and%20(not%20(margin-trim%3A%20inline)))%20or%20((-moz-orient%3A%20inline)%20and%20(not%20(color%3A%20rgb(from%20red%20r%20g%20b))))%20%7B%5Cn%20%20%40layer%20base%20%7B%5Cn%20%20%20%20*%2C%20%3Abefore%2C%20%3Aafter%2C%20%3A%3Abackdrop%20%7B%5Cn%20%20%20%20%20%20--tw-font-weight%3A%20initial%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%40layer%20theme%20%7B%5Cn%20%20%3Aroot%2C%20%3Ahost%20%7B%5Cn%20%20%20%20--font-sans%3A%20ui-sans-serif%2C%20system-ui%2C%20sans-serif%2C%20%5C%22Apple%20Color%20Emoji%5C%22%2C%20%5C%22Segoe%20UI%20Emoji%5C%22%2C%20%5C%22Segoe%20UI%20Symbol%5C%22%2C%20%5C%22Noto%20Color%20Emoji%5C%22%3B%5Cn%20%20%20%20--font-mono%3A%20ui-monospace%2C%20SFMono-Regular%2C%20Menlo%2C%20Monaco%2C%20Consolas%2C%20%5C%22Liberation%20Mono%5C%22%2C%20%5C%22Courier%20New%5C%22%2C%20monospace%3B%5Cn%20%20%20%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%40layer%20base%20%7B%5Cn%20%20*%2C%20%3Aafter%2C%20%3Abefore%2C%20%3A%3Abackdrop%20%7B%5Cn%20%20%20%20box-sizing%3A%20border-box%3B%5Cn%20%20%20%20border%3A%200%20solid%3B%5Cn%20%20%20%20margin%3A%200%3B%5Cn%20%20%20%20padding%3A%200%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%40layer%20utilities%20%7B%5Cn%20%20.text-2xl%20%7B%5Cn%20%20%20%20font-size%3A%20var(--text-2xl)%3B%5Cn%20%20%20%20line-height%3A%20var(--tw-leading%2C%20var(--text-2xl--line-height))%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn%40property%20--tw-font-weight%20%7B%5Cn%20%20syntax%3A%20%5C%22*%5C%22%3B%5Cn%20%20inherits%3A%20false%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D)
    
    Fixes: #17494
    RobinMalfait authored Apr 2, 2025
    Configuration menu
    Copy the full SHA
    3c937ec View commit details
    Browse the repository at this point in the history
  2. Use @tailwindcss/node for import in CLI (#17502)

    Closes #17501
    
    Seems like an oversight. The CLI does have a dependency on
    `@tailwindcss/node` so it should use it from the public import like the
    other stuff.
    philipp-spiess authored Apr 2, 2025
    Configuration menu
    Copy the full SHA
    a429462 View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    6a0a3ec View commit details
    Browse the repository at this point in the history
Loading