I'm not saying Tailwind CSS is a magical solution to everything but all of your examples can be done "the Tailwind way" as well.
Each of these tools is a poor facsimile of the functionality gaps it has to fill. Want an :nth-child or ~ sibling selector? Back to CSS.
Tailwind has selectors for :first-child, :last-child, :odd-child and :even-child. Those cover most of the use cases but in case you want a class only on the 7th-child, the easiest way is to just put the class on that element instead of using the pseudo-selector on the parent element. Or if you are using a front-end framework to dynamically add the elements, you can add the logic of adding the class to the 7th child in javascript.
For siblings, usually you'd just add the classes to the element itself but you could also use the peer-* variants if you need to depend on a sibling element's state.
Want to target the devices between two breakpoints? Back to CSS.
I'm not completely sure what you mean with this but if you only want a class to be applied to let's say the md: breakpoint then you can just set the style back to the original on lg:. For example bg-black md:bg-red-500 lg:bg-black is red only if the window is 768 - 1024px wide.
Want to target children of an element? Back to CSS. You get the picture.
The whole idea in Tailwind is to apply the styles for each element itself so ideally you'd add the class to the child element. If that's not possible then you can create a selector for it yourself or use tailwindcss-children -plugin for example.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm not saying Tailwind CSS is a magical solution to everything but all of your examples can be done "the Tailwind way" as well.
Tailwind has selectors for
:first-child,:last-child,:odd-childand:even-child. Those cover most of the use cases but in case you want a class only on the 7th-child, the easiest way is to just put the class on that element instead of using the pseudo-selector on the parent element. Or if you are using a front-end framework to dynamically add the elements, you can add the logic of adding the class to the 7th child in javascript.For siblings, usually you'd just add the classes to the element itself but you could also use the peer-* variants if you need to depend on a sibling element's state.
I'm not completely sure what you mean with this but if you only want a class to be applied to let's say the
md:breakpoint then you can just set the style back to the original onlg:. For examplebg-black md:bg-red-500 lg:bg-blackis red only if the window is 768 - 1024px wide.The whole idea in Tailwind is to apply the styles for each element itself so ideally you'd add the class to the child element. If that's not possible then you can create a selector for it yourself or use tailwindcss-children -plugin for example.