Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Document how to create custom utility classes and override them for different themes without confusion due to namespaces (Tailwind 4)

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

Chưa có ai nhận issue này.

Đá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
45/100
Loại issue
Tài liệu
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
tailwindcss
Lĩnh vực
documentation

Hướng nghiên cứu

Start by reading the issue examples and the linked discussion, then inspect the Tailwind v4 documentation covering @theme and custom variants. Determine the recommended namespace approach for theme-specific custom utilities; the work is done when the relevant docs explain it clearly with an example and avoid the naming confusion described here.

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

Mô tả

Imagine I want to have several custom utility classes - such as button-default-background or button-default-border - and also override them during dark mode (because I suppose this is one approach to create apps which support themes).

Now I could do it in following way based on tailwind 4 docs:

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-button-default-background: #eb6bd8;
}

@layer base {
 * {
   @variant dark {
     --color-button-default-background: #8e0d7a;
   }
 }
}

But it would generate utilities like bg-button-default-background and text-button-default-background right? However having value named: text-button-default-background seems a bit strange (usage of text and background in the same word) isn't it?

Current docs don't mention how to solve this problem.

In this discussion there was suggestion how to solve this, so can we put this information in the docs, if that's the best way to implement this using tailwind 4?

Ngôn ngữ chính
MDX
Star
150
Fork
78
Không có pull request nào được merge trong 30 ngày

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

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

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 tailwindlabs/tailwindcss.com

Tất cả issue của tailwindlabs/tailwindcss.com

Issue tương tự

Thêm issue về Documentation

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.