:target pseudo class support

[vovayatsyuk]

Looks like there is no :target support in the tailwind core? Do you think it's worth adding it or should I write a custom plugin?

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
Demo: https://developer.mozilla.org/en-US/docs/Web/CSS/:target#Result - Try clicking on the table of contents.

[vovayatsyuk]

This feature is widely used to highlight specific comment in the long discussion. Try this link, it leads to first comment in this thread: #3343 (comment)

[mathieutu]

See #2056

[vovayatsyuk]

Here is the plugin code for someone who may be interested:

const plugin = require('tailwindcss/plugin');

module.exports = {
  ..
  plugins: [
    ..
    plugin(function({ addVariant, e }) {
      addVariant('group-target', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.target:target .${e(`group-target${separator}${className}`)}`
        })
      })
    })
  ]
}

Usage:

<div class="target py-4" id="comment-{{ $comment->id }}">
  ..
  <div class=".. group-target:border-indigo-400 group-target:ring-2 group-target:ring-indigo-300 group-target:ring-opacity-50">
    ..
  </div>
</div>

p.s. While the syntax is almost the same as group-focus/group-hover, I didn't use the group class name to prevent possible collisions with inner components.

Show collisions example

<div class="target" id="comment-{{ $comment->id }}">
  <div class="..">
    <a href="" class="group"><svg class="group-hover:text-gray-400"></svg></a> <!-- Text color for hovered a, not the hovered comment -->
  </div>
  <div class=".. group-target:border-indigo-400 group-target:ring-2 group-target:ring-indigo-300 group-target:ring-opacity-50">
    ..
  </div>
</div>