Can't use @apply within the project's native CSS code.

At present, the apply function is only useable within javascript.

It would be great to be able to use it as a css directive @apply so that we can get access and apply all Tailwind classes within any CSS file, <style> tag of an HTML file or Svelte component, etc…

Ideas for enabling this might be to do it with a vite or postcss plugin.

[sastan]

What I hope to achieve is integration with existing tooling (postcss, vite, webpack, …) that would allow full static extraction without any config. Basically what you two (@danielweck and @rschristian) are already doing.

In my opinion, twind should be able to process existing CSS with support apply, theme, and screen.

@twind {
  h1 {
    @apply text(center 2xl);
  }
}

For svelte:

<style lang="twind">
h1 {
	@apply text(center 2xl);
}
</style>

[danielweck]

For your other suggestion — using twind within <style> — that is still on the table and a TODO for me.

@sastan will no doubt introduce a clean “native” Twind API to handle the <style> use case, but in the meantime this can easily be achieved in userland with Twind v1 (Work In Progress “next” version https://github.com/tw-in-js/twind/tree/next )

document.querySelectorAll('style[type~="twind/css"]').forEach((e) => {
    tw(css(e.textContent));
});

• Link to demo (jspm.org)
• Link to demo (esm.codes)