Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with content in v4 API tables #2027

Closed
dcastil opened this issue Jan 28, 2025 · 4 comments
Closed

Issues with content in v4 API tables #2027

dcastil opened this issue Jan 28, 2025 · 4 comments

Comments

@dcastil
Copy link
Contributor

dcastil commented Jan 28, 2025

Hey! I went through the entire Tailwind CSS v4 documentation as part of dcastil/tailwind-merge#513 and noted some things that looked incorrect to me in the API tables. Not sure whether these are features/bugs or if I got it wrong, but wanted to leave this here in case you want to check them out.

I left out some classes that weren't documented but marked with a // Legacy comment in https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts.

  • Not documented in API table
    • col-auto
    • col-span-full
    • col-span-[<value>]
    • col-span-(<custom-property>)
    • row-auto
    • row-span-full
    • row-span-[<value>]
    • row-span-(<custom-property>)
    • m-*-auto
    • min-w-none
    • max-w-none
    • max-w-prose
    • max-w-screen-<breakpoint>
    • leading-<tight|snug|normal|relaxed|loose>
  • Incorrectly documented in API table
    • bg-(position:<custom-property>) is missing label position
    • bg-(size:<custom-property>) is missing label size
    • outline-offset-(length:<custom-property>) doesn't need length label
@dcastil dcastil changed the title Issues with v4 API tables Issues with content in v4 API tables Jan 28, 2025
@adamwathan
Copy link
Member

Thanks for catching these, just pushed a change that corrects this stuff!

Couple notes:

  • Didn't include min-w-none since that's not real CSS, we included that utility in core by mistake originally
  • Added missing m-px and p-px stuff too
  • Used bg-(length:<custom-property>) for background size since length is the real data type
  • We don't document max-w-prose because we consider it deprecated for v4, but it still works for BC
  • Same thing for max-w-screen-<breakpoint>, we recommend stuff like max-w-(--breakpoint-xl) instead now
  • Didn't document leading-<tight|snug|normal|relaxed|loose> because consider those deprecated now too — they're fine but we never ever use them in our own stuff, creates too many weird rounding and alignment issues vs. using fixed sizes

@dmitrc
Copy link

dmitrc commented Jan 29, 2025

@dcastil
Copy link
Contributor Author

dcastil commented Jan 29, 2025

Thanks for the notes! I'll incorporate those into the tailwind-merge update.

By the way in https://tailwindcss.com/docs/background-size#using-a-custom-value there is an example that is also missing the length label in the arbitrary variable: <div class="bg-(--my-image-size) ...">

dcastil added a commit to dcastil/tailwind-merge that referenced this issue Jan 29, 2025
@adamwathan
Copy link
Member

@adamwathan, another thing that seems to be missing is the --background-image-* theme namespace: https://github.com/tailwindlabs/tailwindcss/blob/f237f595808cf2e2820fe0c9b2fda4b2ca8b30b0/packages/tailwindcss/src/utilities.ts#L2551

@dmitrc Yeah a lot of these namespaces exist purely for BC and aren't documented on purpose at the moment 👍 For adding a custom background image class I'd recommend just creating a custom utility instead now:

@utility bg-potato {
  background-image: url(https://potato.com/potato.jpg);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants