Laravel 8.x设置Tailwind自定义前缀后如何让框架识别对应类名

首先确认前置配置生效：

• 确保你的tailwind.config.js前缀配置正确，示例如下：

module.exports = {
  prefix: 'tw-',
  // 其余theme、plugins等配置保持不变
}

配置完成后重新编译前端资源，保证生成的Tailwind类名均带tw-前缀。

场景1：适配Laravel默认分页组件 #

• 第一步执行Artisan命令发布分页模板到项目目录：
  php artisan vendor:publish --tag=laravel-pagination
  执行后模板会生成在resources/views/vendor/pagination路径下。
• 第二步修改该路径下的tailwind.blade.php、simple-tailwind.blade.php两个模板，将文件内所有Tailwind原生类名前统一加上你设置的tw-前缀，比如原class="flex items-center"修改为class="tw-flex tw-items-center"。
• 第三步在app/Providers/AppServiceProvider.php的boot方法中注册自定义分页模板：

<?php

namespace App\Providers;

use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Paginator::defaultView('vendor.pagination.tailwind');
        Paginator::defaultSimpleView('vendor.pagination.simple-tailwind');
    }
}

场景2：适配Breeze/Jetstream等脚手架生成的视图 #

如果你的项目使用了Laravel官方提供的Breeze、Jetstream等自带Tailwind样式的脚手架，直接修改resources/views路径下对应生成的blade模板，把所有Tailwind类名前加上tw-前缀即可。

可选自动化方案（无需手动修改类名） #

如果项目内Tailwind类名较多手动修改成本高，可以通过自定义Blade指令或者中间件，在视图渲染时自动给所有匹配Tailwind命名规则的类名加上tw-前缀，不过该方案需要额外做规则匹配校验，更推荐手动修改视图的方式，可控性更高也不会出现误替换的问题。

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