css

CSS Styling Guide

This skill provides mandatory specifications for combining TailwindCSS + CSS Modules for styling implementation in this project.

1. Architecture Overview

This project adopts a hybrid styling strategy:

• TailwindCSS: For simple, utility-first styles and layouts.
• CSS Modules: For complex state management, component-specific styles, and high maintainability needs.
• Rsbuild + Lightning CSS: Provides modern CSS processing with PostCSS support.

2. Styling Strategy Decision Tree

When to Use TailwindCSS

// ✅ Use TailwindCSS:
// - Simple layouts (flex, grid, positioning)
// - Basic spacing (margin, padding)
// - Basic colors and typography
// - One-off styles
// - Rapid prototyping

<div className='flex items-center gap-3 p-4'>
  <span className='text-std-600'>Content</span>
</div>

When to Use CSS Modules

// ✅ Use CSS Modules:
// - Complex state transitions (hover, active, focus state combinations)
// - Component-specific animations
// - Nested selector patterns
// - Repeated complex styles
// - Dark mode switching logic
// - Style combinations that would make TailwindCSS class strings too long

import styles from './index.module.css'

<div className={`w_100 border_box relative${styles._local}`}>
  <button className='btn_copy'></button>
</div>

3. TailwindCSS Patterns

3.1 Multi-line Class Naming

// ✅ Recommended: multi-line for readability
<div
	className='
		flex
		items-center justify-center
		w-18 h-screen
		is_drag
	'
>
	<Icon size={20}></Icon>
</div>

// ❌ Avoid: still writing on single line when styles are complex
<div className='flex items-center justify-center w-18 h-screen is_drag'>

3.2 Conditional Styles with Template Strings

// ✅ Use template strings for conditional class names
const Index = ({ fold }: { fold: boolean }) => {
	return (
		<nav
			className={`
				relative
				flex flex-col
				h-full
				${fold ? 'w-18 items-center justify-center' : 'border-std-900/8 w-60 border-r py-2'}
			`}
		>
		</nav>
	)
}