Tailwind

Framework-unabhängige Cursor-Regel für konsistenten Utility-First-Code mit Tailwind CSS.

Original-Beschreibung der Autoren: Tailwind CSS and UI component best practices for modern web applications

Die Regel

---
description: "Tailwind CSS and UI component best practices for modern web applications"
globs: **/*.css, **/*.tsx, **/*.jsx, tailwind.config.js, tailwind.config.ts
alwaysApply: false
---
# Tailwind CSS Best Practices

## Project Setup
- Use proper Tailwind configuration
- Configure theme extension properly
- Set up proper purge configuration
- Use proper plugin integration
- Configure custom spacing and breakpoints
- Set up proper color palette

## Component Styling
- Use utility classes over custom CSS
- Group related utilities with @apply when needed
- Use proper responsive design utilities
- Implement dark mode properly
- Use proper state variants
- Keep component styles consistent

## Layout
- Use Flexbox and Grid utilities effectively
- Implement proper spacing system
- Use container queries when needed
- Implement proper responsive breakpoints
- Use proper padding and margin utilities
- Implement proper alignment utilities

## Typography
- Use proper font size utilities
- Implement proper line height
- Use proper font weight utilities
- Configure custom fonts properly
- Use proper text alignment
- Implement proper text decoration

## Colors
- Use semantic color naming
- Implement proper color contrast
- Use opacity utilities effectively
- Configure custom colors properly
- Use proper gradient utilities
- Implement proper hover states

## Components
- Use shadcn/ui components when available
- Extend components properly
- Keep component variants consistent
- Implement proper animations
- Use proper transition utilities
- Keep accessibility in mind

## Responsive Design
- Use mobile-first approach
- Implement proper breakpoints
- Use container queries effectively
- Handle different screen sizes properly
- Implement proper responsive typography
- Use proper responsive spacing

## Performance
- Use proper purge configuration
- Minimize custom CSS
- Use proper caching strategies
- Implement proper code splitting
- Optimize for production
- Monitor bundle size

## Best Practices
- Follow naming conventions
- Keep styles organized
- Use proper documentation
- Implement proper testing
- Follow accessibility guidelines
- Use proper version control

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Die generischste der Tailwind-Regeln: reine Utility-First-Konventionen ohne Bindung an ein bestimmtes Framework (kein React, Next.js oder Svelte vorausgesetzt). Sinnvoller Startpunkt, wenn Tailwind mit einem Framework kombiniert wird, für das es keine eigene, spezifischere Regel gibt, oder als Basis, die man mit eigenen Ergänzungen versieht. Wer bereits eine framework-spezifische Tailwind-Regel (Next.js, React/Firebase, shadcn/ui) nutzt, braucht diese zusätzlich nicht — die spezifischeren Varianten decken die generischen Tailwind-Konventionen ohnehin mit ab.

Praxis-Tipp

Für schnelle Styling-Aufgaben unabhängig vom Framework, z. B. „baue eine responsive Navbar nur mit Tailwind-Klassen, kein eigenes CSS“.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …