guidelines: tailwind: slightly improved tailwind guidelines

Author: ashleyhindle

.ai/tailwindcss/3/core.blade.php

@@ -0,0 +1,2 @@
+- Always use Tailwind CSS v3, verify you're using only supported classes.
+- Use the `search-docs` tool to find exactly what's supported in this project's Tailwind setup.

.ai/tailwindcss/4/core.blade.php

@@ -0,0 +1,31 @@
+- Always use Tailwind CSS v4, do not use the deprecated utilities.
+- Use the `search-docs` tool to find exactly what's supported in this project's Tailwind setup.
+- In Tailwind v4 you import Tailwind using a regular CSS `@import` statement, not using the `@tailwind` directives used in v3:
+@verbatim
+<code-snippet name="Tailwind v4 import tailwind diff" lang="diff"
+   - @tailwind base;
+   - @tailwind components;
+   - @tailwind utilities;
+   + @import "tailwindcss";
+</code-snippet>
+@endverbatim
+- `corePlugins` is not supported in v4.
+
+## Replaced utilities
+- Tailwind v4 removed deprecated utilities. Do not use the deprecated option, use the replacement.
+- Opacity values are still numeric.
+
+| Deprecated |	Replacement |
+|------------+--------------|
+| bg-opacity-* | bg-black/* |
+| text-opacity-* | text-black/* |
+| border-opacity-* | border-black/* |
+| divide-opacity-* | divide-black/* |
+| ring-opacity-* | ring-black/* |
+| placeholder-opacity-* | placeholder-black/* |
+| flex-shrink-* | shrink-* |
+| flex-grow-* | grow-* |
+| overflow-ellipsis | text-ellipsis |
+| decoration-slice | box-decoration-slice |
+| decoration-clone | box-decoration-clone |
+

.ai/tailwindcss/core.blade.php

@@ -1 +1,18 @@
-- If existing pages and components support dark mode, new pages and components must support dark mode in a similar way.
+- Use Tailwind CSS classes to style HTML, check and use existing tailwind conventions within the project before writing your own.
+- Offer to extract repeated patterns into components that match the project's conventions (i.e. Blade, JSX, Vue, etc..)
+- Think through class placement, order, priority, and defaults - remove redundant classes, add classes to parent or child carefully to limit repetition, group elements logically
+
+## Spacing
+- Use gap utilities for spacing, don't use margins
+@verbatim
+    <code-snippet name="Valid Flex gap spacing example" lang="html">
+        <div class="flex gap-8">
+            <div>Superior</div>
+            <div>Michigan</div>
+            <div>Erie</div>
+        </div>
+    </code-snippet>
+@endverbatim
+
+## Tailwind Dark Mode
+- If existing pages and components support dark mode, new pages and components must support dark mode in a similar way, typically using `dark:`.