¿Cómo acceder a todos los hijos directos de un div en tailwindcss?

Question 1

tengo este html:

<div class="section">
   <div class="header">header</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

Quiero acceder a los hijos directos de div con clase “sección”, que serían divs con clase: “encabezado” y “contenido”.

Sé que con css podemos hacer: div.section > div

Pero cómo hacer esto usando viento de cola?

Question 2

En Tailwind 3.1, puede usar valores arbitrarios para apuntar a elementos secundarios.

<div class="[&>*]:p-4">...</div>
<div class="[&>p]:mt-0 ">...</div>

https://tailwindcss.com/blog/tailwindcss-v3-1#valores-arbitrarios-pero-para-variantes

Question 3

Por defecto no puedes. Sin embargo, uso estas líneas simples en tailwind.config.js para darme child y child-hover opciones

plugins: [
    function ({ addVariant }) {
        addVariant('child', '& > *');
        addVariant('child-hover', '& > *:hover');
    }
],

Entonces usa así

<div class="child:text-gray-200 child-hover:text-blue-500">...</div>

Lo que le dará a cada niño un color de texto gris y uno azul al pasar el mouse.

Ver aquí para obtener más información sobre cómo agregar variantes usando un complemento

Actualizar 4 de julio de 2022: Tailwind agregó un enfoque ad-hoc para apuntar a elementos específicos. Ahora puedes usar [&>*]:text-gray-200 o [&>*:hover]:text-blue-500 para imitar el comportamiento anterior. ¡Vea la respuesta de @phum para más información!

Question 4

Si desea acceder a los elementos secundarios directos de div con selector, utilice @layer directiva. vea abajo:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  div.section > div {
    @apply text-xl;
  }
}

https://tailwindcss.com/docs/agregando-base-estilos

Question 5

Esto no es posible actualmente y probablemente no se implementará pronto.

En su lugar, recomiendo usar este complemento: https://github.com/benface/tailwindcss-niños. Siga el LÉAME para obtener más instrucciones.

Uso:

Una vez que haya instalado el complemento y lo haya agregado a su tailwind.config.jspuede acceder a los niños directos agregando children:{your_style} a la clase de padres. Si, por ejemplo, desea agregar p-4 a header y contentsu código se vería así:

<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>

Question 6

Esta es la versión Tailwind v1 y v2 de Willem Mulder.

el único cambio es el nombre de la variante children en lugar de 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(",");
    });
  });

}),

agregar variantes para el relleno

variants: {
    padding: ['responsive', 'children', 'children-hover', 'children-first', ],
   
  },

Uso:

¿Ha sido útil esta solución?