The @apply works if used in app.css, but I would like to declare styles close to JS elements, not in separate app.css.
How to do it?
app.js
const styles: string[] = []
export const SomeButton: FunctionComponent<{ name: string }> = ({ name }) => {
return <button class="some-button">{name}</button>
}
styles.push(`
.some-button {
@apply text-blue-800;
}
`)
document.getElementById('styles')!.innerHTML = styles.join("n")
app.html
<!doctype html>
<html>
<head>
<link href="app.css" rel="stylesheet" />
<style id="styles"></style>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
It works for CSS, but not for Tailwind. Is there a way to tell Tailwind to also look for @apply directives in JS sources?