From dd52b2192d38104e44d242af2b6b0c5c4e142571 Mon Sep 17 00:00:00 2001
From: sergix <me@sergix.dev>
Date: Mon, 22 Aug 2022 14:18:17 -0400
Subject: [PATCH] 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
---
 packages/integrations/tailwind/README.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md
index d02ddab2bb57..fb6a5ec76bb3 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