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 d02ddab2bb..fb6a5ec76b 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