mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 10:25:13 +00:00
Merge pull request #642 from garrettsiegel/add-tailwind-v4-vite-instructions
Add Tailwind CSS v4 + Vite installation instructions
This commit is contained in:
Aaron Powell
GitHub
@@ -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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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)<br />[](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 |
|
||||
|
||||
243
instructions/tailwind-v4-vite.instructions.md
Normal file
243
instructions/tailwind-v4-vite.instructions.md
Normal file
@@ -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 (
|
||||
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
|
||||
<h1 className="text-3xl font-bold text-blue-600 underline">
|
||||
Hello, Tailwind CSS v4!
|
||||
</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 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
|
||||
Reference in New Issue
Block a user