Use bem like convention for your css so that all your custom classes are "flattened". See eg. SuitCss naming conventions. Lint with postcss-bem-linter so classes follow PascalCase component names typical in React or Vue. Also lint for a optinal namespace (prefix eg. ais- used in Algolia Search).
Then import tailwind after yours, that way any simple flattened class can be overridden by tailwind utils.
So now you can have component say .ns-MessageBox feature a default text color, or font size or anything, (optinally using @apply in the scss stylesheet) and you can override any good defaults, as well as handle layout & spacing in the template eg.
<div class="ns-MessageBox text-red mb-4">…</div>
Likewise then you can also set a good default stylesheet for plain html headings, lists, etc. Because selector "h2" can be overridden by utility. So your headings lists etc can also have sensible default bottom margins padding and whatnot. You have to look at the design templates to determine good defaults, then you dont need to be so verbose with tw in templates.
Then you can also keep your entire color system in Sass if you prefer, take advantage of Sass functions.
It’s very flexible.
A good ruleof thumb is to use tailwind in templates for all the space around components, main layout and spacing of all individual components. Those are the things that tend to bring really confusing and complicated css selectors with pseudo selectors to target first/last elements, which is hard to maintain, hard to read for other devs, much better handled in templates.
Then import tailwind after yours, that way any simple flattened class can be overridden by tailwind utils.
So now you can have component say .ns-MessageBox feature a default text color, or font size or anything, (optinally using @apply in the scss stylesheet) and you can override any good defaults, as well as handle layout & spacing in the template eg.
<div class="ns-MessageBox text-red mb-4">…</div>
Likewise then you can also set a good default stylesheet for plain html headings, lists, etc. Because selector "h2" can be overridden by utility. So your headings lists etc can also have sensible default bottom margins padding and whatnot. You have to look at the design templates to determine good defaults, then you dont need to be so verbose with tw in templates.
Then you can also keep your entire color system in Sass if you prefer, take advantage of Sass functions.
It’s very flexible.
A good ruleof thumb is to use tailwind in templates for all the space around components, main layout and spacing of all individual components. Those are the things that tend to bring really confusing and complicated css selectors with pseudo selectors to target first/last elements, which is hard to maintain, hard to read for other devs, much better handled in templates.