DEV Community

Discussion on: Display content with the 'only' class in Tailwind CSS

darkwiiplayer profile image
DarkWiiPlayer • Edited on

sooo... it basically does something along the lines of

hidden { display: none; }
.only\:block:only-child { display: block }
Enter fullscreen mode Exit fullscreen mode

That's certainly useful, but not nearly as much magic as it seems :D

One thought I'd like to add is that this CSS-solution has a few interesting implications.

Say, for example, you wanted the last task in the list to have some special styling. Assuming your tasks are rendered as <div class="task> here goes content </div>, you might write some CSS that looks like this:

.task:last-child {
   color: red;
Enter fullscreen mode Exit fullscreen mode

But having that hidden block at the end will mess with this selector. This is yet another reason why :nthlast-child(1 of .task) would be a very helpful addition to CSS.

Another implication is that adding or removing tasks through JavaScript without re-rendering would still eventually show and hide the placeholder, whereas otherwise the JS code would have to take care of adding and removing the element, either by adding it as a template from ruby, or by duplicating the HTML in the JS code.