Tailwind Peer class not working while using Vue components

Tailwind Version: 3.4.10
Vue Version: 3.5.3
Vite Verison: 5.4.3

App.vue

<script setup lang="ts">
import ParentComp from "./components/ParentComp.vue";
</script>

<template>
  <ParentComp />
</template>

ParentComp.vue

<script setup lang="ts">
import ChildComp from "./ChildComp.vue";
</script>

<template>
  <div class="peer text-3xl bg-emerald-700">
    <ChildComp child-num="1" />
    <ChildComp child-num="2" />
  </div>
</template>

ChildComp.vue

<script setup lang="ts">
const props = defineProps<{
  childNum: string
}>();
</script>

<template>
  <h1 class="peer-first:bg-green-600 peer-last:bg-red-600">
    Child {{ childNum }}
  </h1>
</template>

What I'm trying to do

I want the first child have a green background and the second (last element) to have a red background.

Expected result

First child will bg-green-600, second child will bg-red-600.

Current result

Got children with bg-emerald-700 background from parent-element.

Solution

Pseudo-classes

These are not peer modifiers but pseudo-classes.

<script src="https://cdn.tailwindcss.com"></script>

<div>
  <p class="first:bg-green-600 last:bg-red-600">First (first)</p>
  <p class="first:bg-green-600 last:bg-red-600">Second</p>
  <p class="first:bg-green-600 last:bg-red-600">Third (last)</p>
</div>

Pseudo-classes: First, last, odd, and even - TailwindCSS Docs
What is pseudo-classes - MDN Docs

Type-oriented pseudo-classes

The first-of-type and last-of-type pseudo-classes apply to specific types of elements within a parent. In the example, -of-type is used on paragraphs, so only the paragraphs' order is considered, even if an h1 is first.

<script src="https://cdn.tailwindcss.com"></script>

<div>
  <h1>This is not a &lt;p&gt; (paragraph) element, so it does not count as the first in the first-of-type selector.</h1>
  <p class="first-of-type:bg-green-600 last-of-type:bg-red-600">First paragraph (first)</p>
  <p class="first-of-type:bg-green-600 last-of-type:bg-red-600">Second paragraph</p>
  <p class="first-of-type:bg-green-600 last-of-type:bg-red-600">Third paragraph (last)</p>
</div>

Peer-modifiers

peer-modifiers are utility classes that apply styles to elements based on the state of a related sibling element with a peer class. In the case of first and last, there is no mention of sibling elements. It specifies which position among the given elements you want to apply the styling to.

Any classes related to positions (which element should have this style) are not about sibling elements or conditions. It simply sets the style for the Xth element and that's it. That’s why they are not categorized as peer-modifiers.

<script src="https://cdn.tailwindcss.com"></script>

<div>
  <input type="checkbox" checked class="peer" />
  <p class="first-of-type:peer-checked:bg-green-600 last-of-type:peer-checked:bg-red-600">First (first)</p>
  <p class="first-of-type:peer-checked:bg-green-600 last-of-type:peer-checked:bg-red-600">Second</p>
  <p class="first-of-type:peer-checked:bg-green-600 last-of-type:peer-checked:bg-red-600">Third (last)</p>
</div>

Styling based on sibling state (peer-{modifier}) - TailwindCSS Docs
peer-modifier using example - StackOverflow answer

Custom coloring with Vue (or JavaScript)

In the example provided, I believe it can be perfectly achieved using TailwindCSS pseudo-classes. However, if this were a more complex model and we were relying solely on the child component's index, we would need to 'calculate' whether the specific child component is the first or last.

Example #1 (with `isFirst`, `isLast` props)

For child components created using a loop, you can determine if a child is the first (index === 0) or last (index === children.length - 1) based on the loop index. This information needs to be passed to the child components, which I did using isFirst and isLast props. These props can then be used during formatting to assemble dynamic class names.

const { createApp, ref } = Vue

const ChildComponent = {
  props: {
    childNum: Number,
    isFirst: Boolean,
    isLast: Boolean,
  },
  template: `
    <div>
       <h1 :class="{ 'bg-green-600': isFirst, 'bg-red-600': isLast }">
         Child #{{ childNum }}
       </h1>
    </div>
  `,
}

const ParentComponent = {
  components: {
    'child-component': ChildComponent,
  },
  setup() {
    const children = ref([
      { num: 1 },
      { num: 2 },
      { num: 3 },
    ])

    return { children }
  },
  template: `
    <div>
      <child-component 
        v-for="(child, index) in children"
        :key="child.num"
        :child-num="child.num"
        :is-first="index === 0"
        :is-last="index === children.length - 1"
      />
    </div>
  `,
}

const app = createApp({
  components: {
    'parent-component': ParentComponent,
  },
  template: `
    <parent-component />
  `,
});

app.mount('#app');

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="app"></div>

<div>
  <h1
    :class="{
      'bg-green-600': isFirst,
      'bg-red-600': isLast,
    }"
  >
    Child #{{ childNum }}
  </h1>
</div>

Binding HTML Classes: Binding to Objects - Vue Docs

Example #2 (with `peer`)

Bringing the peer modifier inside the child element is a bit more challenging. In a Tailwind CSS discussion #8777, using group-[] to monitor the default large group was suggested. It indeed works.

const { createApp, ref } = Vue

const ChildComponent = {
  props: {
    childNum: Number,
    isFirst: Boolean,
    isLast: Boolean,
  },
  template: `
    <div>
       <h1 :class="{ 'peer-checked:group-[]:bg-green-600': isFirst, 'peer-checked:group-[]:bg-red-600': isLast }">
         Child #{{ childNum }}
       </h1>
    </div>
  `,
}

const ParentComponent = {
  components: {
    'child-component': ChildComponent,
  },
  setup() {
    const children = ref([
      { num: 1 },
      { num: 2 },
      { num: 3 },
    ])

    return { children }
  },
  template: `
    <div>
      <child-component 
        v-for="(child, index) in children"
        :key="child.num"
        :child-num="child.num"
        :is-first="index === 0"
        :is-last="index === children.length - 1"
      />
    </div>
  `,
}

const app = createApp({
  components: {
    'parent-component': ParentComponent,
  },
  template: `
    <input type="checkbox" checked class="peer" />
    <parent-component class="group" />
  `,
});

app.mount('#app');

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="app"></div>

Parent

<input type="checkbox" class="peer" />

Child

<!-- Source: https://github.com/tailwindlabs/tailwindcss/discussions/8777#discussion-4194432 -->

<div>
  <h1 class="peer-checked:group-[]:bg-green-600">
    Child #{{ childNum }}
  </h1>
</div>

Example #3 (with `group-peer` plugin)

Within the same discussion #8777, there was another example where a plugin was used to create a group that forwards the original peer.

tailwind.config = {
  plugins: [
    function groupPeer({ addVariant }) {
      let pseudoVariants = [
        // ... Any other pseudo variants you want to support. 
        // See https://github.com/tailwindlabs/tailwindcss/blob/6729524185b48c9e25af62fc2372911d66e7d1f0/src/corePlugins.js#L78
        "checked",
      ].map((variant) =>
        Array.isArray(variant) ? variant : [variant, `&:${variant}`],
      );

      for (let [variantName, state] of pseudoVariants) {
        addVariant(`group-peer-${variantName}`, (ctx) => {
          let result = typeof state === "function" ? state(ctx) : state;
          return result.replace(/&(\S+)/, ":merge(.peer)$1 ~ .group &");
        });
      }
    },
  ],
}

const { createApp, ref } = Vue

const ChildComponent = {
  props: {
    childNum: Number,
    isFirst: Boolean,
    isLast: Boolean,
  },
  template: `
    <div>
       <h1 :class="{ 'peer-checked:group-[]:bg-green-600': isFirst, 'peer-checked:group-[]:bg-red-600': isLast }">
         Child #{{ childNum }}
       </h1>
    </div>
  `,
}

const ParentComponent = {
  components: {
    'child-component': ChildComponent,
  },
  setup() {
    const children = ref([
      { num: 1 },
      { num: 2 },
      { num: 3 },
    ])

    return { children }
  },
  template: `
    <div>
      <child-component 
        v-for="(child, index) in children"
        :key="child.num"
        :child-num="child.num"
        :is-first="index === 0"
        :is-last="index === children.length - 1"
      />
    </div>
  `,
}

const app = createApp({
  components: {
    'parent-component': ParentComponent,
  },
  template: `
    <input type="checkbox" checked class="peer" />
    <parent-component class="group" />
  `,
});

app.mount('#app');

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="app"></div>