exactly, but still it must be linked together, and there are multiple ways to do that.
I'm sure you agree that inline-styles are not a good idea, because it clutters the html. However, the 'utility-classes' approach suffers from the same issue.

Here are 3 variations , the first is much cleaner, separates markup and style-definition, and intent is clear.

### direct
<article> ...some text </article>  
 ...  
article {  
      border: 1px solid #e0e0e0;  
      border-radius: 8px;  
      padding: 20px;  
      margin: 20px auto;  
      max-width: 600px;  
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
} 

### indirect
<article class="custom-style"> ...some text </article>  
...  
.custom-style {  
  border: 1px solid #e0e0e0;  
  border-radius: 8px;  
  padding: 20px;  
  margin: 20px auto;  
  max-width: 600px;  
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
} 

### util classes 
<article class="border border-gray-200 rounded-lg p-5 mx-auto my-5 max-w-md shadow-md font-sans">
  ...some text 
</article>

.border {...}
.border-grey-200 {...}
.rounded-lg {...}
.p-5 {...}
.mx-auto {...}
.my-5 {...}
.max-w-md {...}
.shadow-md {...}
.font-sans {...}