Ich habe diese html:
<div class="section">
<div class="header">header</div>
<div class="content">
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>
Ich möchte auf die direkten Kinder von div mit der Klasse “section” zugreifen, die divs mit der Klasse “header” und “content” wären.
Ich weiß, dass wir mit CSS Folgendes tun können: div.section > div
Aber wie macht man das mit Rückenwindcss?
In tailwind 3.1 können Sie beliebige Werte verwenden, um auf untergeordnete Elemente abzuzielen.
<div class="[&>*]:p-4">...</div>
<div class="[&>p]:mt-0 ">...</div>
https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants
Dieser sollte akzeptiert werden. 🙋♂️
– Mr.spShuvo
28. Juli um 4:12
Ich würde sagen, dass dies überhaupt nicht verwendet werden sollte. Wieso den? Denn wenn es sich zum Beispiel um eine untergeordnete Komponente handelt, ändern Sie den Stil der Komponente von einer anderen Stelle, an der sie ihre eigenen Stile hat. Es schafft fachliche Tiefe, ist kaum auffindbar und ich vermute, dass dies überhaupt keine gute Praxis ist.
– Ernedar
3. August um 8:17 Uhr
Ich stimme zu, dass diese Lösung nach Möglichkeit nicht implementiert werden sollte, aber es gibt Zeiten, in denen Sie nicht direkt auf HTML zugreifen können (z. B. Skript von Drittanbietern). Es kann ein ziemlich nützlicher Ausweg sein, wenn Sie versuchen, HTML zu stylen, das Sie nicht direkt ändern können.
– phum
3. August um 9:52
Beachten Sie, dass Leerzeichen zur Auswahl von Nachkommen durch Unterstriche ersetzt werden müssen, z '[&_svg]:stroke-white' Anstatt von '[& svg]:stroke-white'. Sehen tailwindcss.com/docs/…
– kca
5. September um 10:32
@kca Erwägen Sie, dies der obigen Antwort hinzuzufügen. Genau damit hatte ich Probleme. Die Antwort sollte Ihren Standpunkt enthalten.
– sagundcode
7. Oktober um 17:54 Uhr
Willem Mulder
Standardmäßig können Sie das nicht. Ich verwende jedoch diese einfachen Zeilen in tailwind.config.js mir geben child und child-hover Optionen.
plugins: [
function ({ addVariant }) {
addVariant('child', '& > *');
addVariant('child-hover', '& > *:hover');
}
],
Dann so verwenden
<div class="child:text-gray-200 child-hover:text-blue-500">...</div>
Dadurch erhält jedes Kind eine graue Textfarbe und eine blaue beim Hover.
Sehen Hier für weitere Informationen zum Hinzufügen von Varianten mit einem Plugin
Aktualisieren 4. Juli 2022: Tailwind fügte einen Ad-hoc-Ansatz hinzu, um auf bestimmte Elemente abzuzielen. Sie können jetzt verwenden [&>*]:text-gray-200 oder [&>*:hover]:text-blue-500 um das obige Verhalten nachzuahmen. Weitere Informationen finden Sie in der Antwort von @phum!
Dies war ein Lebensretter für mich. Wenn Sie nach einer noch freizügigeren Version suchen, bei der der Elternteil alle Kinder betrifft, können Sie verwenden & * und &:hover * beziehungsweise. Dies war praktisch für die Komponentenentwicklung
– Josh Frankel
8. April um 16:14 Uhr
Schön, danke für die Ergänzung!
– Willem Mulder
13. April um 16:00 Uhr
Wie kann man dasselbe im Browser mit CDN erreichen? Ich habe versucht zu tun tailwind.config = { plugins: () => {...}} aber das funktioniert nicht.
– Srikanth Sharma
24. April um 7:42 Uhr
@SrikanthSharma Interessant; Ich wusste nicht, dass sie eine CDN-Version haben. Wenn man sich die Dokumentation ansieht, scheint es, als würden sie tatsächlich Plugins in der CDN-Version unterstützen (was an sich schon ein Wunder wäre). Vielleicht haben Sie Plugins nicht als Array definiert?
– Willem Mulder
25. April um 8:19 Uhr
:child Variante alleine sollte aber reichen child:hover:... wird :hover > * und umgekehrt, was seltsam ist, da Rückenwinddokumente sagen, dass die Varianten in der Reihenfolge angewendet werden, in der sie angegeben wurden … also child-hover wird gebraucht
– Sodj
11. Mai um 16:06 Uhr
Wenn Sie mit dem Selektor auf die direkten Kinder von div zugreifen möchten, verwenden Sie bitte @layer Richtlinie. siehe unten:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
div.section > div {
@apply text-xl;
}
}
idk, aber das funktioniert bei mir nicht div.field_with_errors > label { @apply text-red-900; }
– Buncis
27. August um 4:44 Uhr
Beachten Sie, dass der Basis-Layer nur das Standard-Styling der Apps für häufig verwendete Tags enthalten sollte und nicht für das Styling eines bestimmten Anwendungsfalls ausgelegt ist
– Gabriel Petersson
18. November um 12:23 Uhr
Pascal-1609
Dies ist derzeit nicht möglich und wird wahrscheinlich nicht bald implementiert.
Stattdessen empfehle ich die Verwendung dieses Plugins: https://github.com/benface/tailwindcss-children. Folgen Sie der README-Datei für weitere Anweisungen.
Nachdem Sie das Plugin installiert und zu Ihrer hinzugefügt haben tailwind.config.jskönnen Sie durch Hinzufügen direkt auf untergeordnete Elemente zugreifen children:{your_style} zur Elternklasse. Wenn Sie zum Beispiel hinzufügen möchten p-4 zu header und contentwürde Ihr Code so aussehen:
<div class="section children:p-4">
<div class="header">header</div>
<div class="content">
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>
scil
Dies ist die Tailwind v1&v2-Version von Willem Mulder.
einzige Änderung ist der Variantenname children Anstatt von child
plugin(function({ addVariant, e }) {
addVariant('children', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
const newClass = e(`children${separator}${className}`);
return [
`.${newClass} > *`,
// `.${newClass}:hover `,
].join(",");
});
});
addVariant('children-first', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
const newClass = e(`children-first${separator}${className}`);
return [
`.${newClass} > *:first-child`,
].join(",");
});
});
}),
fügen Sie Varianten für die Polsterung hinzu
variants: {
padding: ['responsive', 'children', 'children-hover', 'children-first', ],
},
