故事发生的背景：
1.tailwind去写样式比较长，看起来就是template比较长
2.使用eslint-plugin-tailwindcss进行eslint进行校验，会导致警告，看起来很难受
即使是这样子还是会报黄色警告
什么是 eslint-plugin-tailwindcss ？
使用 eslint-plugin-tailwindcss 可以显著提升你的 CSS 编码质量。这种工具为开发者提供了一种集成 Tailwind CSS 的 ESLint 插件，帮助在编码过程中自动检测和纠正潜在问题。
为啥要使用 eslint-plugin-tailwindcss ？
1. 一致性和可维护性
使用 eslint-plugin-tailwindcss 可以确保团队中的所有成员遵循相同的编码标准。
这种一致性不仅提高了代码的可读性，也使得代码在团队中更加容易维护。
通过自动检测不符合规则的代码片段，开发者可以更快地识别和修复问题。
2. 错误检测和预防
插件能够在开发过程中实时检测常见的错误和不良实践。它可以帮助识别错误的类名，未定义的 Tailwind 配置，或是无效的组合。这种实时反馈可以防止错误的积累，从而减少调试时间和生产环境中的问题。
3. 提高生产力
由于插件自动检测并提示问题，开发者可以专注于功能实现，而不是花费大量时间在代码审查和样式问题上。插件的自动修复功能也可以帮助快速纠正小错误，进一步提高工作效率。
4. 优化性能
eslint-plugin-tailwindcss 可以帮助优化 Tailwind 的使用，避免重复和冗余的样式定义。这不仅减少了 CSS 的体积，也提高了页面加载速度和性能。通过建议更有效的类名组合，插件可以帮助创建更精简的样式。
5. 更好的集成
插件与 ESLint 的集成使得 Tailwind CSS 的验证成为整个代码质量检查的一部分。这种无缝集成意味着开发者可以在现有的工作流程中轻松加入 Tailwind CSS 的检查，而无需额外的工具或步骤。
6. 学习和提升
对于新手开发者，eslint-plugin-tailwindcss 提供了一个学习和提升的机会。通过自动化的反馈，开发者可以更快地理解 Tailwind CSS 的最佳实践和用法。插件的提示和建议也有助于开发者探索更高级的技巧和优化方法。
总而言之，eslint-plugin-tailwindcss 提供了一种有效的方法来提高 CSS 编码质量。通过一致性、错误检测、性能优化和社区支持，这个插件帮助开发者创建更高效、更可靠的代码库。无论是个人项目还是大型团队协作，使用这种工具都能带来显著的长期收益。
所以，使用eslint-plugin-tailwindcss的好处大于坏处，那么黄色警告怎么解决呢？
无意间看到了vue3支持css module，那么就意味着可以像react那样子去使用，这样子去规范团队开发会更加合理~
