diff --git a/.vscode/settings.json b/.vscode/settings.json
index b28e8cdb..44215cc6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,5 +17,13 @@
"yaml.schemas": {
"./.schemas/collection.schema.json": "*.collection.yml",
"./.schemas/tools.schema.json": "website/data/tools.yml",
- }
+ },
+ "files.exclude": {
+ "**/.git": true,
+ "**/.svn": true,
+ "**/.hg": true,
+ "**/.DS_Store": true,
+ "**/Thumbs.db": true
+ },
+ "hide-files.files": []
}
diff --git a/docs/README.instructions.md b/docs/README.instructions.md
index eb2d82d3..e9d48839 100644
--- a/docs/README.instructions.md
+++ b/docs/README.instructions.md
@@ -165,6 +165,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
| [Svelte 5 and SvelteKit Development Instructions](../instructions/svelte.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsvelte.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsvelte.instructions.md) | Svelte 5 and SvelteKit development standards and best practices for component-based user interfaces and full-stack applications |
| [Swift MCP Server Development Guidelines](../instructions/swift-mcp-server.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fswift-mcp-server.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fswift-mcp-server.instructions.md) | Best practices and patterns for building Model Context Protocol (MCP) servers in Swift using the official MCP Swift SDK package. |
| [Symfony Development Instructions](../instructions/php-symfony.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fphp-symfony.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fphp-symfony.instructions.md) | Symfony development standards aligned with official Symfony Best Practices |
+| [Tailwind CSS v4+ Installation with Vite](../instructions/tailwind-v4-vite.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftailwind-v4-vite.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftailwind-v4-vite.instructions.md) | Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin |
| [Taming Copilot](../instructions/taming-copilot.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftaming-copilot.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftaming-copilot.instructions.md) | Prevent Copilot from wreaking havoc across your codebase, keeping it under control. |
| [TanStack Start with Shadcn/ui Development Guide](../instructions/tanstack-start-shadcn-tailwind.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.instructions.md) | Guidelines for building TanStack Start applications |
| [Task Plan Implementation Instructions](../instructions/task-implementation.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftask-implementation.instructions.md)
[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftask-implementation.instructions.md) | Instructions for implementing task plans with progressive tracking and change record - Brought to you by microsoft/edge-ai |
diff --git a/instructions/tailwind-v4-vite.instructions.md b/instructions/tailwind-v4-vite.instructions.md
new file mode 100644
index 00000000..5f17f01c
--- /dev/null
+++ b/instructions/tailwind-v4-vite.instructions.md
@@ -0,0 +1,243 @@
+---
+description: 'Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin'
+applyTo: 'vite.config.ts, vite.config.js, **/*.css, **/*.tsx, **/*.ts, **/*.jsx, **/*.js'
+---
+
+# Tailwind CSS v4+ Installation with Vite
+
+Instructions for installing and configuring Tailwind CSS version 4 and above using the official Vite plugin. Tailwind CSS v4 introduces a simplified setup that eliminates the need for PostCSS configuration and tailwind.config.js in most cases.
+
+## Key Changes in Tailwind CSS v4
+
+- **No PostCSS configuration required** when using the Vite plugin
+- **No tailwind.config.js required** - configuration is done via CSS
+- **New @tailwindcss/vite plugin** replaces the PostCSS-based approach
+- **CSS-first configuration** using `@theme` directive
+- **Automatic content detection** - no need to specify content paths
+
+## Installation Steps
+
+### Step 1: Install Dependencies
+
+Install `tailwindcss` and the `@tailwindcss/vite` plugin:
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+### Step 2: Configure Vite Plugin
+
+Add the `@tailwindcss/vite` plugin to your Vite configuration file:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ ],
+})
+```
+
+For React projects with Vite:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+ plugins: [
+ react(),
+ tailwindcss(),
+ ],
+})
+```
+
+### Step 3: Import Tailwind CSS
+
+Add the Tailwind CSS import to your main CSS file (e.g., `src/index.css` or `src/App.css`):
+
+```css
+@import "tailwindcss";
+```
+
+### Step 4: Verify CSS Import in Entry Point
+
+Ensure your main CSS file is imported in your application entry point:
+
+```typescript
+// src/main.tsx or src/main.ts
+import './index.css'
+```
+
+### Step 5: Start Development Server
+
+Run the development server to verify installation:
+
+```bash
+npm run dev
+```
+
+## What NOT to Do in Tailwind v4
+
+### Do NOT Create tailwind.config.js
+
+Tailwind v4 uses CSS-first configuration. Do not create a `tailwind.config.js` file unless you have specific legacy requirements.
+
+```javascript
+// ❌ NOT NEEDED in Tailwind v4
+module.exports = {
+ content: ['./src/**/*.{js,ts,jsx,tsx}'],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+```
+
+### Do NOT Create postcss.config.js for Tailwind
+
+When using the `@tailwindcss/vite` plugin, PostCSS configuration for Tailwind is not required.
+
+```javascript
+// ❌ NOT NEEDED when using @tailwindcss/vite
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
+```
+
+### Do NOT Use Old Directives
+
+The old `@tailwind` directives are replaced by a single import:
+
+```css
+/* ❌ OLD - Do not use in Tailwind v4 */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ✅ NEW - Use this in Tailwind v4 */
+@import "tailwindcss";
+```
+
+## CSS-First Configuration (Tailwind v4)
+
+### Custom Theme Configuration
+
+Use the `@theme` directive in your CSS to customize your design tokens:
+
+```css
+@import "tailwindcss";
+
+@theme {
+ --color-primary: #3b82f6;
+ --color-secondary: #64748b;
+ --font-sans: 'Inter', system-ui, sans-serif;
+ --radius-lg: 0.75rem;
+}
+```
+
+### Adding Custom Utilities
+
+Define custom utilities directly in CSS:
+
+```css
+@import "tailwindcss";
+
+@utility content-auto {
+ content-visibility: auto;
+}
+
+@utility scrollbar-hidden {
+ scrollbar-width: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+```
+
+### Adding Custom Variants
+
+Define custom variants in CSS:
+
+```css
+@import "tailwindcss";
+
+@variant hocus (&:hover, &:focus);
+@variant group-hocus (:merge(.group):hover &, :merge(.group):focus &);
+```
+
+## Verification Checklist
+
+After installation, verify:
+
+- [ ] `tailwindcss` and `@tailwindcss/vite` are in `package.json` dependencies
+- [ ] `vite.config.ts` includes the `tailwindcss()` plugin
+- [ ] Main CSS file contains `@import "tailwindcss";`
+- [ ] CSS file is imported in the application entry point
+- [ ] Development server runs without errors
+- [ ] Tailwind utility classes (e.g., `text-blue-500`, `p-4`) render correctly
+
+## Example Usage
+
+Test the installation with a simple component:
+
+```tsx
+export function TestComponent() {
+ return (
+
+
+ Hello, Tailwind CSS v4!
+
+
+ )
+}
+```
+
+## Troubleshooting
+
+### Styles Not Applying
+
+1. Verify CSS import statement is `@import "tailwindcss";` (not old directives)
+2. Ensure CSS file is imported in your entry point
+3. Check Vite config includes the `tailwindcss()` plugin
+4. Clear Vite cache: `rm -rf node_modules/.vite && npm run dev`
+
+### Plugin Not Found Error
+
+If you see "Cannot find module '@tailwindcss/vite'":
+
+```bash
+npm install @tailwindcss/vite
+```
+
+### TypeScript Errors
+
+If TypeScript cannot find types for the Vite plugin, ensure you have the correct import:
+
+```typescript
+import tailwindcss from '@tailwindcss/vite'
+```
+
+## Migration from Tailwind v3
+
+If migrating from Tailwind v3:
+
+1. Remove `tailwind.config.js` (move customizations to CSS `@theme`)
+2. Remove `postcss.config.js` (if only used for Tailwind)
+3. Uninstall old packages: `npm uninstall postcss autoprefixer`
+4. Install new packages: `npm install tailwindcss @tailwindcss/vite`
+5. Replace `@tailwind` directives with `@import "tailwindcss";`
+6. Update Vite config to use `@tailwindcss/vite` plugin
+
+## Reference
+
+- Official Documentation: https://tailwindcss.com/docs/installation/using-vite
+- Tailwind CSS v4 Upgrade Guide: https://tailwindcss.com/docs/upgrade-guide