vuejs と tailwind を使用すると、条件付きクラス変更に基づく CSS 変換が機能しない

Question

<p><strong>tailwind</strong> <code>transition</code> クラスを使用してサイドバーを展開しようとしています<strong><code><router-link>< ;/ code> サブメニュー</strong> コンポーネント。 </p> <pre class="brush:php;toolbar:false;">// テンプレート

<div class="flex items-center"> <FontAwesomeIcon :icon="リンク.アイコン" class="サイドバーリンクアイコン" /> {{ リンク.ラベル }} </div> <FontAwesomeIcon :icon="link.open ? ['fas', 'chevron-up'] : ['fas', 'chevron-down']" class="サイドバードロップダウンリンクアイコン" /> </div> // これは面白い行です... <div :class="`${link.open ? `h-[${link.sublinks.length * 45}px]` : 'h-0'} サイドバードロップダウンメニュー`"> <ルーターリンク v-for=「(サブリンク, インデックス) in link.sublinks」 :key="index" class="サイドバーリンク mt-1" :to="サブリンク.ルート" > <FontAwesomeIcon :icon="サブリンク.アイコン" class="サイドバー-リンク-アイコン pl-3" /> {{ サブリンク.ラベル }} </ルーターリンク> </div></pre> <p>期待される動作は、<code>link.open</code> が <code>true</code> になると、<strong>興味深い行< <div> で定義された <code> ;</code>tag/strong> は 300 ミリ秒の遷移で展開 (または表示) され、その <code>height</code> の値は <code>link.sublinks.length</code> に基づいて調整されています。値の定義。すべて <code>sidebar-dropdown-menu</code> CSS クラスを適用します。私が言いたいのは: </p> <pre class="brush:php;toolbar:false;">.sidebar-dropdown-menu { @apply w-full overflow-hiddentransition-[height] period-[300ms] }</pre> <p><code>link.sublinks.length</code> が <code>3</code> に等しい場合、適用されるカスタム クラスは <code>h-[135px]</ になります。 code> と <code> <strong>面白い行</strong> の <div></code> タグが表示されますが、<code>p-0</code> クラスは期待どおりに動作しますが、変換は機能しません。 Google Chrome Dev Tools では、<code>height: 135px</code> が無効な CSS ルールとして表示されます。 </p> <p>最後に、<code>h-[${link.sublinks.length * 45}px]</code> を定数値に置き換えるとします (例: <code>h-[200px]< /code>) すべてが期待どおりに機能します。 </p> <p><code>h-auto</code> が高さのカスタム クラスをオーバーライドしているのではないかと思われます。 </p> <p>私はラテン系なので、英語はあまり上手ではありません。 </p> <p>よろしくお願いします。 </p>

P粉872182023415日前434

Answer 1

うまくいきましたが、見つけた解決策が気に入りません:

リーリー

Tailwind クラスを使用して高さ属性を定義することは避けてください。今のところはこれだけです。