[筆記] Tailwindcss 3 升 4 後維持原有 3 的樣式內容 @地瓜大的飛翔旅程

章節連結

內容
參考資料

近期 Tailwindcss 3 的專案想往上升 4，發現其預設的 Preflight 樣式有不少變動。這邊筆記一下要額外補上的內容。

內容

用 @layer base 加上以下內容

/* Keep Default from TailwindCSS v3 */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-400);
  }
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
  dialog {
    margin: auto;
  }
  [type=text], input:where(:not([type])), [type=email], [type=url], [type=password], [type=number], [type=date], [type=datetime-local], [type=month], [type=search], [type=tel], [type=time], [type=week], [multiple], textarea, select {
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Keep Default from TailwindCSS v3 */

@layer base {

::after,

::before,

::backdrop,

::file-selector-button {

border-color: var(--color-gray-200, currentColor);

}

input::placeholder,

textarea::placeholder {

color: var(--color-gray-400);

}

button:not(:disabled),

[role="button"]:not(:disabled) {

cursor: pointer;

}

dialog {

margin: auto;

}

[type=text], input:where(:not([type])), [type=email], [type=url], [type=password], [type=number], [type=date], [type=datetime-local], [type=month], [type=search], [type=tel], [type=time], [type=week], [multiple], textarea, select {

appearance: none;

background-color: #fff;

border-color: #6b7280;

border-width: 1px;

border-radius: 0;

padding: .5rem .75rem;

font-size: 1rem;

line-height: 1.5rem;

}