Document how to create custom utility classes and override them for different themes without confusion due to namespaces (Tailwind 4)
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 45/100
- issue の種類
- ドキュメント
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- tailwindcss
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
説明
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?
- 主要言語
- MDX
- スター
- 150
- フォーク
- 78
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
tailwindlabs/tailwindcss.com のほかの issue
-
Theme variables page doesn't explain how to override values for a dark theme対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
tailwindlabs/tailwindcss.com#2526 ·
-
No central documentation of options @import options対応中かも @MHJahanbakhsh が 71 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
tailwindlabs/tailwindcss.com#2514 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
tailwindlabs/tailwindcss.com#2497 · リアクション 3 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
tailwindlabs/tailwindcss.com#2493 ·
-
Clarity on using colors in custom utilities対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
tailwindlabs/tailwindcss.com#2473 ·
tailwindlabs/tailwindcss.com の issue をすべて見る
似ている issue
-
難易度 1/5 1時間未満 初心者へのやさしさ 70/100
WordPress/Documentation-Issue-Tracker#2540 · コメント 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
JustAResearcher/gpu-unlock-ada#98 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
transit-audio/transit#159 ·
-
難易度 1/5 1〜3時間 初心者へのやさしさ 84/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
ioos/marine_life_data_network#219 ·