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

Framework-unabhängige Basisregel für konsistenten Utility-First-Code mit Tailwind CSS – gilt für React, Vue, Svelte oder reines HTML gleichermaßen. Sie legt Konventionen für Klassenreihenfolge, Vermeidung von Inline-Styles und Wiederverwendung über @apply oder Komponenten-Patterns fest. Sinnvoll als Grundregel, wenn kein spezifischeres Framework-Kombi-Regelwerk (z. B. Tailwind+Next.js oder Tailwind+SvelteKit) zutrifft, oder als Ergänzung dazu. Der Vorteil gegenüber den spezialisierten Varianten: Sie lässt sich in jedem Stack einsetzen, deckt dafür aber keine framework-spezifischen Details wie Routing oder Server-Komponenten ab.

Praxis-Tipp

Als generische Basis einbinden, wenn kein passendes Framework-Kombi-Regelwerk existiert, etwa bei einem Vue- oder Astro-Projekt mit Tailwind.

Lizenz & Quelle

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

Lade …