Tailwind CSS Engineering Standard¶
Version: 1.0.0
Status: official
Author: Enterprise AI Standards
Description¶
Official engineering standard for building modern, responsive, accessible and visually consistent enterprise user interfaces using Tailwind CSS.
Objective¶
Define mandatory standards for creating scalable design systems, reusable UI components and high-quality user experiences.
Philosophy¶
Tailwind CSS should be used to build a design system, not isolated styles. Every component must be visually consistent, reusable and maintainable.
Principles¶
- Utility First.
- Mobile First.
- Component Driven.
- Accessibility First.
- Consistency over creativity.
- Design System.
- Reusable UI.
- Minimalism.
- High Information Density.
- Professional Appearance.
Project Structure¶
Language Features¶
Virtual Threads¶
Structured Concurrency¶
Records¶
Sealed Classes¶
Pattern Matching¶
Collections¶
Streams¶
Optional¶
Exceptions¶
Logging¶
Performance¶
- Purge unused classes.
- Minimize CSS bundle.
- Lazy loading.
- Optimized assets.
Security¶
Testing¶
Observability¶
Documentation¶
Best Practices¶
- Mobile First.
- Reusable Components.
- Design Tokens.
- Consistent Spacing.
- Dark Mode.
- Accessible UI.
- Skeleton Loading.
- Semantic Colors.
- Responsive Layouts.
- Component Composition.
Anti Patterns¶
- Inline CSS.
- Duplicated Components.
- Arbitrary Values Everywhere.
- Inconsistent Colors.
- Multiple Button Styles.
- Hardcoded Sizes.
- Missing Responsive Design.
- Missing Dark Mode.
- Low Contrast.
- Accessibility Ignored.
Review Checklist¶
- [ ] Responsive.
- [ ] Dark Mode.
- [ ] Mobile First.
- [ ] Accessible.
- [ ] Design Tokens.
- [ ] Skeleton Loading.
- [ ] Toast Notifications.
- [ ] Reusable Components.
- [ ] Lucide Icons.
- [ ] shadcn/ui.
Examples¶
References¶
- https://tailwindcss.com/
- https://ui.shadcn.com/
- https://www.radix-ui.com/
- https://lucide.dev/
- https://www.framer.com/motion/