One of the most difficult things during software development it to name things. That's of the advantages Tailwind CSS is offering. But also by just using HTML and the style attribute you get this advantage. In this case you don't need to set a class name at all:
<button
style="background: rebeccapurple;
color: white;
border: none;
border-radius: .5rem;
padding: .5rem .7rem;"
>
Click me
</button>
This can work in many cases. On the other hand, when you use the style attribute for some more rules, the code quickly can become look very messy. Also you don't the ability to use selectors, so you can't use :hover, :focus or others. This only works using "real" CSS, like in <style> element:
<style>
button {
background: rebeccapurple;
color: white;
border: none;
border-radius: 0.5rem;
padding: 0.5rem 0.7rem;
}
button:hover {
background: color-mix(in oklch, black 10%, rebeccapurple);
}
</style>
<button>Click me</button>
This works! But now we lost the benefit that the styles were only applied to this one button. Instead it changed the style of all buttons on the website. To change this, we'll use the at-rule @scope together with the selector :scope:
<button>
<style>
@scope {
:scope {
background: rebeccapurple;
color: white;
border: none;
border-radius: 0.5rem;
padding: 0.5rem 0.7rem;
}
:scope:hover {
background: color-mix(in oklch, black 10%, rebeccapurple);
}
}
</style>
Click me
</button>
Scopes are isolated areas, whereby the selector :scope always stands for the top-level node. By default, this is the top element in the HTML document, the html element. However, you can create a new area using the at-rule @scope { }. If nothing else is specified, and it is set within the button element in a stylesheet as in my example, :scope then represents the button. This can be very helpful.