| 123456789101112131415161718192021222324252627282930313233 |
- ---
- description: Best practices for Tailwind CSS
- globs: *.vue
- alwaysApply: false
- ---
- - Implement responsive design with Tailwind's responsive modifiers
- - All colors and themes should be consistent with the overall UI element-plus. Please refer to `src/theme/element.scss`
- - Customize Tailwind's default theme using `tailwind.config.js`
- - Use `@apply` directive for component-level styling
- ## Dark Mode Guidelines
- - **Color Variables**: Use CSS custom properties defined in `src/theme/dark.scss` for dark mode colors
- - **Primary Colors**:
- - Background: `--next-bg-main` (#17202a) - Twitter standard dark background
- - Text: `--next-color-white` (#f7f9f9) - Primary text color
- - Accent: `#1d9bf0` - Twitter blue for active states and links
- - **Component Colors**:
- - Disabled background: `--next-color-disabled` (#202e3a)
- - Hover states: `--next-color-hover` (#1e2732) or `--next-color-hover-rgba` (rgba(239, 243, 244, 0.1))
- - Borders: `--next-border-color` (#38444d) or `--next-border-black` (#2f3336)
- - **Text Colors**:
- - Regular text: `--next-text-color-regular` (#8b98a5)
- - Placeholder text: `--next-text-color-placeholder` (#536471)
- - **Consistency Rules**:
- - Always use `[data-theme='dark']` selector for dark mode styles
- - Maintain Twitter-inspired color scheme consistency
- - Use semi-transparent overlays for hover effects: `rgba(29, 155, 240, 0.1)` for primary, `rgba(239, 243, 244, 0.1)` for neutral
- - **Component Specific**:
- - Cards: Background `--next-color-disabled` with `--next-border-color` borders
- - Buttons: Use defined CSS variables, avoid hardcoded colors
- - Forms: Input background `#273340`, border `#38444d`, focus with Twitter blue accent
- - Tables: Header background `#1c2732`, hover `--next-color-hover`
- - **Avoid**: Hardcoded hex colors in dark mode, use CSS variables for maintainability
|
