Tailwind stacked media variants leave nested CSS in rendered emails

Đang mở
  • Có gì không ổn?
#3,874 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@lakshya-dhariwal đang làm issue này rồi.

Từ ngày 8/11/2026.

  • #3875 của @lakshya-dhariwal — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
node.js, react, tailwindcss, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start by reading the compatibility conversion function at canary commit 674d8ec2804b86be5d99156383fb1810179847bf and reproduce the issue with [email protected] using the provided sm:dark:bg-black example. The issue does not name a file or test path, so locate the conversion’s tests and compare the generated CSS with the expected flattened media query. The issue is linked to open pull request #3875.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

With [email protected], Tailwind CSS 4.3.5 and Node 24.22.1, combining variants such as sm:dark:bg-black leaves an @media inside a CSS style rule.

import { render, Tailwind, Head, Html, Body, Text } from 'react-email';

const html = await render(
  <Tailwind>
    <Html>
      <Head />
      <Body>
        <Text className="sm:dark:bg-black">Example</Text>
      </Body>
    </Html>
  </Tailwind>
);

Actual generated CSS:

@media (min-width:40rem) {
  .sm_dark_bg-black {
    @media (prefers-color-scheme:dark) {
      background-color:rgb(0,0,0)!important;
    }
  }
}

Expected: flatten the media conditions without leaving CSS nesting inside a style rule, consistent with the compatibility conversion’s stated purpose.

@media (min-width:40rem) and (prefers-color-scheme:dark) {
  .sm_dark_bg-black {
    background-color:rgb(0,0,0)!important;
  }
}

Single variants work correctly. The same nesting reproduces when directly testing the conversion function from canary commit 674d8ec2804b86be5d99156383fb1810179847bf with [email protected]. The full canary renderer and actual Gmail/Outlook rendering have not been tested.

Ngôn ngữ chính
TypeScript
Star
19.9k
Fork
1.1k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
49

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của resend/react-email

Tất cả issue của resend/react-email

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.