Wie greife ich auf alle direkten Kinder eines div in tailwindcss zu?

Lesezeit: 5 Minuten

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

Benutzeravatar von Willem Mulder
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;
  }
}

https://tailwindcss.com/docs/adding-base-styles

  • 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

Benutzeravatar von Pascal-1609
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.

Verwendung:

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>

Benutzeravatar von scil
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', ],
   
  },

1436990cookie-checkWie greife ich auf alle direkten Kinder eines div in tailwindcss zu?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy