first-of-type pseudo-class

[fox000]

It will be nice to add first-of-type pseudo-class to Tailwind CSS which will allow to apply different classes to first element of specific type as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

[simonswiss]

Hey @fox000 👋

Cannot really tell if this is something that will land in Tailwind core, but you can add these first-of-type utilities with the help of the Tailwind plugin system (namely, the addVariant function).

Here's a quick example that would let you change the color of first-of-type elements:

1. Add a first-of-type variant in your plugins

// tailwind.config.js
const plugin = require("tailwindcss/plugin");

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  plugins: [
    // Let's add a `first-of-type` variant!
    plugin(function ({ addVariant, e }) {
      addVariant("first-of-type", ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`first-of-type${separator}${className}`)}:first-of-type`;
        });
      });
    }),
  ],
};

You can see that in our Tailwind config file, under the plugins array, we create a new plugin. We add a new variant with addVariant, which we call first-of-type.

We then use the modifySelectors function to generate class names that are prefixed with first-of-type:, and suffixed with :first-of-type.

This should turn a class like .text-red-600 into .first-of-type\:text-red-600:first-of-type, which is what we want here!

2. Enable the new variant

We have created a new first-of-type variant, but no utility classes will be generated until we enable that variant in at least one of Tailwind's core plugins.

In this example, I'll go and enable our new variant for the textColor plugin like so:

// tailwind.config.js
const plugin = require("tailwindcss/plugin");

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
+ variants: {
+   textColor: ({ after }) => after(["first-of-type"]),
+ },
  plugins: [
    // Let's add a `first-of-type` variant!
    plugin(function ({ addVariant, e }) {
      addVariant("first-of-type", ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`first-of-type${separator}${className}`)}:first-of-type`;
        });
      });
    }),
  ],
};

Now that we "switched on" our first-of-type variant for the textColor core plugin, we can use this variant on text color utility classes in our HTML:

<div>
  <h2 class="first-of-type:text-red-600">heading 2</h2>
  <p class="first-of-type:text-red-600">paragraph</p>
  <p class="first-of-type:text-red-600">paragraph</p>
  <h2 class="first-of-type:text-red-600">heading 2</h2>
  <h3 class="first-of-type:text-red-600">heading 3</h3>
</div>

And here's the output you'd get for it:

Only the first h2, p and h3 elements within the div get the red-600 text color.

Hope this helps! 👍

[techniq]

I took the great example by @simonswiss and put it in a playground for easier reference. I also updated it to use the extend variants feature of 2.0.

[Tromp64]

Not all pseudo-class variants are enabled for all utilities by default due to file-size considerations MyAARPMedicare