Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

custom units aren't "preferred" in classes selection

オープン
#25 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
tailwindcss
領域
devtools, frontend

調査の方向性

提供された HTML と Tailwind クラスを、DevTools を開いた 2560px のウィンドウで Chrome 上に再現し、その後、DevTools を閉じた状態で適用される grid class と比較します。適切な min-* class が常に選択され、DevTools で base grid-cols class がそれを上書きしなくなれば、Issue は完了です。

索引モデルが issue の本文から書いたものです。

説明

I know it's a rare issue, but still, i think it's worth sharing.
Here is a component that displays a certain number of cards according to screen width (hence the precise numbers).

<div class="projects-cards mt-10 grid
                max-w-full
                grid-cols-[repeat(1,_minmax(273px,_1fr))]
                min-[626px]:grid-cols-[repeat(2,_minmax(273px,_1fr))]
                min-[1000px]:grid-cols-[repeat(3,_minmax(273px,_1fr))]
                min-[1356px]:grid-cols-[repeat(4,_minmax(273px,_1fr))]
                min-[1591px]:grid-cols-[repeat(5,_minmax(273px,_1fr))]
                min-[1900px]:grid-cols-[repeat(6,_minmax(273px,_1fr))]
                gap-11 pb-10"
                     id="projects-cards">

                </div>

In the browser without DevTools, the min-* classes have higher priority: if my window width is 2560px, i'll have 6 rows.
But in Chrom with DevTools, the grid-cols-[repeat(1,_minmax(273px,_1fr))] is applied, whatever the actual window width.

主要言語
言語のデータがありません
スター
5
フォーク
0
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

beyondcode/devtoolsfortailwind-community のほかの issue

beyondcode/devtoolsfortailwind-community の issue をすべて見る

似ている issue

DevTools の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。