{"kind":"AgentDefinition","metadata":{"namespace":"community","name":"tailwind-v4-vite","version":"0.1.0"},"spec":{"agents_md":"---\ndescription: 'Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin'\napplyTo: 'vite.config.ts, vite.config.js, **/*.css, **/*.tsx, **/*.ts, **/*.jsx, **/*.js'\n---\n\n# Tailwind CSS v4+ Installation with Vite\n\nInstructions 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.\n\n## Key Changes in Tailwind CSS v4\n\n- **No PostCSS configuration required** when using the Vite plugin\n- **No tailwind.config.js required** - configuration is done via CSS\n- **New @tailwindcss/vite plugin** replaces the PostCSS-based approach\n- **CSS-first configuration** using `@theme` directive\n- **Automatic content detection** - no need to specify content paths\n\n## Installation Steps\n\n### Step 1: Install Dependencies\n\nInstall `tailwindcss` and the `@tailwindcss/vite` plugin:\n\n```bash\nnpm install tailwindcss @tailwindcss/vite\n```\n\n### Step 2: Configure Vite Plugin\n\nAdd the `@tailwindcss/vite` plugin to your Vite configuration file:\n\n```typescript\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n  plugins: [\n    tailwindcss(),\n  ],\n})\n```\n\nFor React projects with Vite:\n\n```typescript\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    tailwindcss(),\n  ],\n})\n```\n\n### Step 3: Import Tailwind CSS\n\nAdd the Tailwind CSS import to your main CSS file (e.g., `src/index.css` or `src/App.css`):\n\n```css\n@import \"tailwindcss\";\n```\n\n### Step 4: Verify CSS Import in Entry Point\n\nEnsure your main CSS file is imported in your application entry point:\n\n```typescript\n// src/main.tsx or src/main.ts\nimport './index.css'\n```\n\n### Step 5: Start Development Server\n\nRun the development server to verify installation:\n\n```bash\nnpm run dev\n```\n\n## What NOT to Do in Tailwind v4\n\n### Do NOT Create tailwind.config.js\n\nTailwind v4 uses CSS-first configuration. Do not create a `tailwind.config.js` file unless you have specific legacy requirements.\n\n```javascript\n// ❌ NOT NEEDED in Tailwind v4\nmodule.exports = {\n  content: ['./src/**/*.{js,ts,jsx,tsx}'],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n### Do NOT Create postcss.config.js for Tailwind\n\nWhen using the `@tailwindcss/vite` plugin, PostCSS configuration for Tailwind is not required.\n\n```javascript\n// ❌ NOT NEEDED when using @tailwindcss/vite\nmodule.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n}\n```\n\n### Do NOT Use Old Directives\n\nThe old `@tailwind` directives are replaced by a single import:\n\n```css\n/* ❌ OLD - Do not use in Tailwind v4 */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* ✅ NEW - Use this in Tailwind v4 */\n@import \"tailwindcss\";\n```\n\n## CSS-First Configuration (Tailwind v4)\n\n### Custom Theme Configuration\n\nUse the `@theme` directive in your CSS to customize your design tokens:\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n  --color-primary: #3b82f6;\n  --color-secondary: #64748b;\n  --font-sans: 'Inter', system-ui, sans-serif;\n  --radius-lg: 0.75rem;\n}\n```\n\n### Adding Custom Utilities\n\nDefine custom utilities directly in CSS:\n\n```css\n@import \"tailwindcss\";\n\n@utility content-auto {\n  content-visibility: auto;\n}\n\n@utility scrollbar-hidden {\n  scrollbar-width: none;\n  \u0026::-webkit-scrollbar {\n    display: none;\n  }\n}\n```\n\n### Adding Custom Variants\n\nDefine custom variants in CSS:\n\n```css\n@import \"tailwindcss\";\n\n@variant hocus (\u0026:hover, \u0026:focus);\n@variant group-hocus (:merge(.group):hover \u0026, :merge(.group):focus \u0026);\n```\n\n## Verification Checklist\n\nAfter installation, verify:\n\n- [ ] `tailwindcss` and `@tailwindcss/vite` are in `package.json` dependencies\n- [ ] `vite.config.ts` includes the `tailwindcss()` plugin\n- [ ] Main CSS file contains `@import \"tailwindcss\";`\n- [ ] CSS file is imported in the application entry point\n- [ ] Development server runs without errors\n- [ ] Tailwind utility classes (e.g., `text-blue-500`, `p-4`) render correctly\n\n## Example Usage\n\nTest the installation with a simple component:\n\n```tsx\nexport function TestComponent() {\n  return (\n    \u003cdiv className=\"min-h-screen bg-gray-100 flex items-center justify-center\"\u003e\n      \u003ch1 className=\"text-3xl font-bold text-blue-600 underline\"\u003e\n        Hello, Tailwind CSS v4!\n      \u003c/h1\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Troubleshooting\n\n### Styles Not Applying\n\n1. Verify CSS import statement is `@import \"tailwindcss\";` (not old directives)\n2. Ensure CSS file is imported in your entry point\n3. Check Vite config includes the `tailwindcss()` plugin\n4. Clear Vite cache: `rm -rf node_modules/.vite \u0026\u0026 npm run dev`\n\n### Plugin Not Found Error\n\nIf you see \"Cannot find module '@tailwindcss/vite'\":\n\n```bash\nnpm install @tailwindcss/vite\n```\n\n### TypeScript Errors\n\nIf TypeScript cannot find types for the Vite plugin, ensure you have the correct import:\n\n```typescript\nimport tailwindcss from '@tailwindcss/vite'\n```\n\n## Migration from Tailwind v3\n\nIf migrating from Tailwind v3:\n\n1. Remove `tailwind.config.js` (move customizations to CSS `@theme`)\n2. Remove `postcss.config.js` (if only used for Tailwind)\n3. Uninstall old packages: `npm uninstall postcss autoprefixer`\n4. Install new packages: `npm install tailwindcss @tailwindcss/vite`\n5. Replace `@tailwind` directives with `@import \"tailwindcss\";`\n6. Update Vite config to use `@tailwindcss/vite` plugin\n\n## Reference\n\n- Official Documentation: https://tailwindcss.com/docs/installation/using-vite\n- Tailwind CSS v4 Upgrade Guide: https://tailwindcss.com/docs/upgrade-guide\n","description":"Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin","import":{"commit_sha":"541b7819d8c3545c6df122491af4fa1eae415779","imported_at":"2026-05-18T20:05:35Z","license_text":"MIT License\n\nCopyright GitHub, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","owner":"github","repo":"github/awesome-copilot","source_url":"https://github.com/github/awesome-copilot/blob/541b7819d8c3545c6df122491af4fa1eae415779/instructions/tailwind-v4-vite.instructions.md"},"manifest":{}},"content_hash":[221,86,22,127,128,19,76,145,69,44,50,114,69,3,29,217,143,123,232,73,207,192,240,199,235,85,46,215,58,59,122,218],"trust_level":"unsigned","yanked":false}