Laravel 9环境下如何合并Tailwind CSS多样式类为自定义类？

在Laravel 9 + Vite + Tailwind的技术栈下，你可以通过Tailwind提供的@apply指令，把零散的工具类合并成一个自定义的复用类，具体步骤如下：

1. 编辑项目的自定义CSS文件
   找到项目中引入Tailwind的CSS文件（通常是resources/css/app.css），在文件末尾添加自定义类的样式：

   .button-style {
       @apply mt-2 px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150;
       @apply bg-purple-600 border border-transparent rounded-lg;
       /* 处理hover状态 */
       &:hover {
           @apply bg-purple-700;
       }
       /* 处理active状态 */
       &:active {
           @apply bg-purple-600;
       }
       /* 处理focus状态 */
       &:focus {
           @apply outline-none shadow-outline-purple;
       }
   }
   

   这里用嵌套选择器（&:hover这类）对应原Tailwind的状态类，能保证样式优先级和原代码完全一致，避免之前拆分时出现的效果不一致问题。

2. 修改Blade模板中的按钮代码
   把按钮原来的一堆Tailwind类替换成自定义的.button-style即可：

   <div class="flex items-center justify-center" style="width: 100%">
       <button class="button-style" onclick="window.location.href='{{ route('logboek.show')}}'">
           logboek
       </button>
   </div>
   

3. 确保样式正常编译
   如果Vite处于热重载状态（npm run dev），页面会自动刷新生效；如果是生产环境，记得执行npm run build重新编译CSS文件，确保自定义类被Tailwind正确解析。

内容的提问来源于stack exchange，提问作者Jeremy