Include note about Tailwind per-component errors using '@apply' (#4353)

* add: @apply exceptions for component frameworks

Some frameworks, specifically Vue, will not recognize global @layer directives in a global stylesheet because of how Vue's build system works. Instead, prefer to add a plugin to your Tailwind config. #2660, #3073

* Update README.md

* Update README.md

1 files changed, 19 insertions, 0 deletions

diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md
index d02ddab2b..fb6a5ec76 100644
--- a/packages/integrations/tailwind/README.md
+++ b/packages/integrations/tailwind/README.md
@@ -127,6 +127,25 @@ export default {
 
 You can now [import your own `base.css` as a local stylesheet](https://docs.astro.build/en/guides/styling/#import-a-local-stylesheet).
 
+If you are using Vue, Svelte, or another component integration with Astro, `@apply` directives used in component `<style>`s may generate errors about your custom Tailwind class not existing and cause your builds to fail. [Instead of using `@layer` directives in a a global stylesheet](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), define your custom styles by adding a plugin to your Tailwind config:
+
+```js
+// tailwind.config.cjs
+module.exports = {
+  // ...
+  plugins: [
+    function ({ addComponents, theme }) {
+      addComponents({
+        '.btn': {
+          padding: theme('spacing.4'),
+          margin: 'auto'
+        }
+      })
+    }
+  ]
+}
+```
+
 ## Examples
 
 - The [Astro Tailwind Starter](https://github.com/withastro/astro/tree/latest/examples/with-tailwindcss?on=github) gets you up and running with a base for your project that uses Tailwind for styling