cursorrules/.cursor/rules/tailwind-standards.mdc at main · ivangrynenko/cursorrules · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
---
description: Tailwind CSS class organization and best practices
globs: *.vue, *.jsx, *.tsx, *.html
---
# Tailwind CSS Standards

Ensures consistent and optimized usage of Tailwind CSS classes.

<rule>
name: tailwind_standards
description: Enforce Tailwind CSS best practices and organization
filters:
  - type: file_extension
    pattern: "\\.(vue|jsx|tsx|html)$"

actions:
  - type: enforce
    conditions:
      - pattern: "class=\"[^\"]*\\s{2,}"
        message: "Remove multiple spaces between Tailwind classes"

      - pattern: "class=\"[^\"]*(?:text-\\w+\\s+text-\\w+|bg-\\w+\\s+bg-\\w+)"
        message: "Avoid conflicting utility classes"

  - type: suggest
    message: |
      Tailwind Best Practices:
      - Group related utilities together
      - Use @apply for commonly repeated patterns
      - Follow responsive design patterns
      - Implement proper dark mode support
      - Consider extracting components for repeated patterns

metadata:
  priority: medium
  version: 1.0
</rule>