分享我在开发中用到的 10 个超实用的 Tailwind CSS 技巧，帮助你在日常开发中更高效地使用 Tailwind，话不多说上代码
1. 使用自定义 CSS 变量来动态调整侧边栏的宽度。
2. 基于全局状态管理，使用 data-* 属性动态切换宽度
3. 根据状态使用 data-* 属性改变子元素的样式（嵌套子元素也可以这样操作）。例如，在侧边栏折叠时旋转一个图标
4. 这与上面的效果相同，但现在我们是基于父级的 data-* 属性来设置样式的。
5. 现在使用 group 和 group-data 来实现。根据组的状态旋转图标。当你希望在父级宽度变化时调整图标大小时，这种方法非常有用。
6. 使用 data-slot 技术为子元素设置样式，并在悬停时进行变化。
7. 根据同级元素的状态设置样式。比如，当按钮处于激活状态时，滑动展示相应的操作内容。
8. 根据父元素或组内的焦点状态设置子元素的样式。我们使用一个命名的 group 来避免与侧边栏中的其他 group 发生冲突。当组内元素获得焦点时，子元素样式会发生相应变化。
9. 根据同一组内另一个子元素的状态设置子元素的样式。当我点击操作（绿色）时，使按钮变为蓝色。这种方法在你需要在下拉按钮被点击时为菜单项设置样式时非常有用。
10. 根据另一个组件的属性改变组件的样式。在这个例子中，当按钮有不同的变体时，我们会改变操作的边框样式并旋转图标。
结语
👋 大家好，我是泫子，一名热爱前端开发的工程师，拥有 7 年的丰富经验。待过小厂、中厂、大厂，近年来，致力于提升用户体验和技术共享。 如果你想一起学习前端，一起研究简历优化，一起研究面试进步，有人带你一步步进入高级前端的水平，点这个 --> 高级前端进阶
