tailwindlabs / tailwindcss

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

[v4] undocumented button style changes in `beta.1` #15073

Closed F-fengzi closed 3 days ago

F-fengzi commented 3 days ago

What version of Tailwind CSS are you using?

v4.0.0-beta.1

What build tool (or framework if it abstracts the build tool) are you using?

vite 5.4.11, @tailwindcss/vite 4.0.0-beta.1, svelte 5.2.7

What version of Node.js are you using?

v20.17.0

What browser are you using?

Chrome 131

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/onv0DKfoZj (it's really just an unstyled button)

Describe your issue

Kind of a follow-up to #14985, I noticed that my button styles broke after updating to this version. There doesn't seem to be a changelog tracking the changes from alpha.36 to beta.1. Will we ever get one? I completely understand if it's not a priority, and I can probably figure the changes out 😅.

What I noticed: probably a preflight change, buttons are now styled by default with a border and a background color, or perhaps more. You can reproduce this by making an unstyled button and compare them between this version and a previous version.

wongjn commented 3 days ago

Probably from this PR: #15036. Also noted in the v4 beta docs:

We’ve updated the default styles in Preflight for form elements to look more like form elements. They aren’t designed by any means, and are meant to look like user-agent styles but be a bit easier to customize.

We’re making this change because we hated that inputs in v3 were totally invisible by default, which felt opinionated and surprising, and made them inaccessible out of the box until you customized them.

The easiest way to update an existing project to account for these changes is to reset these styles in your own CSS:

@import "tailwindcss";

@layer base {
  input,
  textarea,
  select,
  button {
    border: 0px solid;
    border-radius: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;
    color: inherit;
  }
}

This is a pretty significant change to our base styles, but we’re optimistic that once everyone gets used to it that it’ll feel like a much better default.

F-fengzi commented 3 days ago

@wongjn Ah ok, I haven't read through that whole thing yet... thanks!

philipp-spiess commented 3 days ago

@F-fengzi Hey! This change is also documented in the changelog for alpha 36 which released a couple of hours before: https://github.com/tailwindlabs/tailwindcss/blob/next/CHANGELOG.md#added-1

The changes documented between alpha 36 and beta 1 are indeed only in the changelog file for now and not in the GitHub release view because it would be confusing for most people coming from v3. It's better to refer to the full docs for most folks.

F-fengzi commented 2 days ago

Ohhhhhh ok. Thank you