# Solid.js (Tailwind CSS)

# Solid.js with Tailwind CSS Integration

## Overview
This document outlines the best practices and rules for integrating Solid.js with Tailwind CSS in your projects. It covers component structure, styling, performance optimizations, and more.

## Best Practices
- **Functional Components**: Prefer functional components using Solid.js's `createSignal()` for reactive state management.
- **Styling**: Implement Tailwind CSS classes for styling and use the `@apply` directive in CSS files for reusable styles.
- **Responsive Design**: Utilize Tailwind's responsive classes for implementing responsive design.
- **Dark Mode**: Implement dark mode using Tailwind's dark variant.
- **Customization**: Use Tailwind's configuration file for customization.

## Folder Structure
```
src/
  components/
  pages/
  styles/
  App.jsx
  index.jsx
public/
  index.html
tailwind.config.js
postcss.config.js
```

## Additional Instructions
1. **JSX**: Use JSX for component templates.
2. **CSS Purging**: Implement proper Tailwind CSS purging for production builds.
3. **Routing**: Utilize Solid Router for routing when applicable.
4. **Custom Styles**: Use Tailwind's `@layer` directive for custom styles.
5. **Utility-First CSS**: Implement a utility-first CSS approach.
6. **Naming Conventions**: Follow both Solid.js and Tailwind naming conventions.
7. **JIT Mode**: Use JIT (Just-In-Time) mode for faster development.

## Performance Optimization
- **Reactive State**: Use `createSignal()` for efficient state management.
- **Lazy Loading**: Implement lazy loading for components where applicable.
- **Optimized Builds**: Ensure Tailwind CSS is properly purged in production builds to minimize file size.

## Testing
- **Unit Tests**: Write unit tests using Jest and Solid Testing Library.
- **Test Coverage**: Aim for at least 80% test coverage.
- **Snapshot Testing**: Use snapshot testing for UI components.

## Documentation
- **JSDoc**: Write comments for functions and components in JSDoc format.
- **README**: Each main directory must contain a README.md file with both English and Chinese versions.

## Error Handling
- **Asynchronous Operations**: Use `try/catch` blocks to handle asynchronous operations.
- **Global Error Boundary**: Implement a global error boundary component to catch runtime errors.