Ah sorry, I worded that incorrectly. Should've been "the styles defined via Tailwind classes already only apply to the element they are added to."
(Ninja edit:) So to clarify: if I want to add some padding to an element with plain CSS, I have to think of a class name for that element, and then define styles for that class. However, if I happen to use that class name elsewhere in my code, then the styles I've defined there suddenly apply to that element as well. And vice versa: before I can delete a class from my code base, I have to be aware of every element that uses it.
CSS-in-JS solves that: all styles defined for a single component will only ever apply to that component.
The same holds true for Tailwind: you define the styles through the classes you apply, which will not affect other components in your codebase, and likewise, removing them (the Tailwind classes) is safe as well.
(Ninja edit:) So to clarify: if I want to add some padding to an element with plain CSS, I have to think of a class name for that element, and then define styles for that class. However, if I happen to use that class name elsewhere in my code, then the styles I've defined there suddenly apply to that element as well. And vice versa: before I can delete a class from my code base, I have to be aware of every element that uses it.
CSS-in-JS solves that: all styles defined for a single component will only ever apply to that component.
The same holds true for Tailwind: you define the styles through the classes you apply, which will not affect other components in your codebase, and likewise, removing them (the Tailwind classes) is safe as well.