Copilot instructions

1---
2description: Rails Styling with TailwindCSS
3applyTo: "app/views/**/*.html.erb,app/assets/stylesheets/**/*.css"
4---
5 
6# Rails Styling with TailwindCSS
7 
8## Core Philosophy
9 
10- Use utility-first CSS for rapid development
11- Avoid writing custom CSS when utilities exist
12- Keep styling consistent across the application
13- Design mobile-first, enhance for desktop
14- Let TailwindCSS handle the complexity
15 
16## TailwindCSS Principles
17 
18- Compose styles using utility classes
19- Avoid premature abstraction into components
20- Use consistent spacing and sizing scales
21- Leverage TailwindCSS's design system
22- Keep HTML as the source of truth for styling
23 
24## Configuration Strategy
25 
26- Extend default theme rather than replacing it
27- Define custom colors sparingly
28- Use CSS variables for dynamic theming
29- Configure content paths correctly
30- Keep configuration minimal
31 
32## Rails Integration
33 
34- Use Tailwind's standalone CLI approach
35- Configure asset pipeline integration properly
36- Set up proper purging for production
37- Use Rails helpers with Tailwind classes
38- Keep build process simple
39 
40## Utility-First Approach
41 
42- Start with utilities before extracting components
43- Use modifier classes for responsive design
44- Apply state modifiers directly in HTML
45- Leverage arbitrary values when needed
46- Keep utility usage consistent
47 
48## Component Patterns
49 
50- Extract components only when truly reusable
51- Use `@apply` sparingly and deliberately
52- Keep extracted components simple
53- Document component patterns clearly
54- Prefer composition over complex components
55 
56## Responsive Design
57 
58- Design mobile-first always
59- Use breakpoint prefixes consistently
60- Test at all breakpoint sizes
61- Consider touch targets on mobile
62- Optimize for common device sizes
63 
64## Color Management
65 
66- Use Tailwind's color palette
67- Define semantic color names
68- Maintain consistent color usage
69- Support dark mode properly
70- Test color accessibility
71 
72## Typography System
73 
74- Use Tailwind's typography scale
75- Keep font sizes consistent
76- Implement proper line heights
77- Use appropriate font weights
78- Consider readability always
79 
80## Spacing Guidelines
81 
82- Use Tailwind's spacing scale exclusively
83- Keep spacing consistent throughout
84- Apply spacing systematically
85- Use negative margins carefully
86- Document spacing decisions
87 
88## Form Styling
89 
90- Style forms consistently with utilities
91- Use focus states for accessibility
92- Implement proper error states
93- Keep inputs touch-friendly
94- Test form usability thoroughly
95 
96## Animation and Transitions
97 
98- Use Tailwind's transition utilities
99- Keep animations subtle and purposeful
100- Implement reduced motion support
101- Test animation performance
102- Avoid excessive animations
103 
104## Dark Mode Implementation
105 
106- Design with dark mode in mind
107- Use Tailwind's dark mode utilities
108- Test both modes thoroughly
109- Ensure sufficient contrast
110- Handle images appropriately
111 
112## Performance Optimization
113 
114- Configure PurgeCSS correctly
115- Monitor CSS bundle size
116- Use JIT mode for development
117- Optimize for critical CSS
118- Lazy load non-critical styles
119 
120## Accessibility Considerations
121 
122- Ensure sufficient color contrast
123- Use focus-visible for keyboard navigation
124- Test with screen readers
125- Implement proper ARIA attributes
126- Follow WCAG guidelines
127 
128## Rails View Integration
129 
130- Use Tailwind classes in Rails helpers
131- Keep ERB templates readable
132- Apply styles consistently
133- Use partials for repeated patterns
134- Document styling patterns
135 
136## Asset Pipeline Configuration
137 
138- Configure Tailwind with Propshaft
139- Set up proper build commands
140- Use Rails asset helpers
141- Configure for production builds
142- Keep configuration simple
143 
144## Development Workflow
145 
146- Use Tailwind CSS IntelliSense
147- Configure editor for Tailwind
148- Use browser DevTools effectively
149- Test across browsers
150- Keep styles maintainable
151 
152## Common Patterns
153 
154- Card layouts with shadows
155- Responsive navigation menus
156- Form layouts with proper spacing
157- Modal dialogs with overlays
158- Data tables with hover states
159 
160## Anti-Patterns to Avoid
161 
162- Don't recreate utility classes
163- Avoid inline styles
164- Don't over-extract components
165- Skip complex CSS when utilities work
166- Prevent specificity battles
167 
168## Debugging Techniques
169 
170- Use browser DevTools
171- Check compiled CSS output
172- Verify purging works correctly
173- Test responsive breakpoints
174- Monitor specificity issues
175 
176## Team Guidelines
177 
178- Document custom utilities
179- Share component patterns
180- Maintain style consistency
181- Review styling in PRs
182- Keep team aligned
183 
184## Migration Strategy
185 
186- Convert CSS gradually
187- Use Tailwind alongside existing styles
188- Replace custom CSS with utilities
189- Test thoroughly during migration
190- Document migration decisions
191 
192## Production Considerations
193 
194- Optimize CSS delivery
195- Use CDN for assets
196- Enable compression
197- Monitor performance metrics
198- Cache assets appropriately
199 
200## Best Practices Summary
201 
202- Let utilities do the work
203- Keep HTML readable
204- Design systematically
205- Test across devices
206- Maintain consistency
207 
208Remember: TailwindCSS provides a complete design system. Use it fully before writing custom CSS.
209