Tailwind Css

安装

using vite

项目中为何选择

• 开发效率高
• 维护性强
• 响应式设计友好
• 与现代前端框架兼容性好

如何解决样式冲突

• 类名优先级：后者覆盖前者
• 配置文件定制
• 命名空间：-tw-bg-red-500

响应式断点底层实现

• 为每个带前缀的类生成@media (min-width: ...)包裹的 CSS 规则
• JIT 模式动态生成
  • 扫描你的 HTML/JSX/TSX 文件，找出所有使用的类名
  • 动态生成对应的 CSS，包括响应式变体
  • 只生成你用到的类，文件体积极小（性能优化）
• 断点定义：在 tailwind.config.js 中配置 screens
• 类名处理：:被转义为\:，避免与伪类冲突