README

介绍

此包封装了Tailwind CSS CLI 工具。无需 Node.js。

灵感来源

安装

您可以通过 composer 安装此包

composer require tonysm/tailwindcss-laravel

接下来，您可能需要运行安装命令

php artisan tailwindcss:install

可选地，您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="tailwindcss-config"

用法

此包包含 4 个命令和一个辅助函数。

下载 Tailwind CSS 独立二进制文件

由于每个 OS/CPU 都需要自己的编译二进制版本，因此您需要首先运行下载命令

php artisan tailwindcss:download

这将根据您的 OS 和 CPU 架构检测正确的版本。

默认情况下，它将二进制文件放置在应用程序的根目录。二进制文件将命名为 tailwindcss。您可能希望将该行添加到项目的 .gitignore 文件中。

或者，您可以在 config/tailwindcss.php 中配置此二进制文件的位置（如果您想这样做，请确保导出配置文件）。

安装脚手架

有一些文件对于设置工作是必需的。在一个全新的 Laravel 应用程序中，您可以运行安装命令，如下所示

php artisan tailwindcss:install

这将确保在项目的根目录中有一个 tailwind.config.js 文件，以及一个具有基本 Tailwind CSS 设置的 resources/css/app.css 文件。

构建

要构建 Tailwind CSS 样式，您可以使用构建命令

php artisan tailwindcss:build

默认情况下，它将读取您的 resources/css/app.css 文件，并在 public/css/app.css 中生成编译后的 CSS 文件。

您可能希望使用文件名中的散列来生成最终的 CSS 文件以进行缓存破坏（理想用于生产）。您可以使用 --digest 标志这样做

php artisan tailwindcss:build --digest

您还可以生成最终 CSS 文件的最小化版本（理想用于生产）。您可以使用 --minify 标志这样做

php artisan tailwindcss:build --minify

这两个标志将构成理想的生产组合。或者，您可能更喜欢使用单个 --prod 标志，它与上面的组合基本相同，但更短

php artisan tailwindcss:build --prod

监视文件更改

在本地开发时，运行监视命令很有用，该命令将监视您的本地文件，并在您进行本地更改时重新运行构建

php artisan tailwindcss:watch

注意：监视命令不应用于与 --digest 或 --minify 标志结合使用。

使用编译后的资产

要使用编译后的资产，您可以使用 tailwindcss 辅助函数而不是 mix 函数，如下所示

- <link rel="stylesheet" href="{{ mix('css/app.css') }}" >
+ <link rel="stylesheet" href="{{ tailwindcss('css/app.css') }}" >

这就足够了。

部署您的应用程序

在部署应用程序时，请确保将理想的构建组合添加到您的部署脚本中

php artisan tailwindcss:build --prod

如果您正在运行“全新”的应用程序（或隔离的环境，如 Vapor），并且已将二进制文件添加到 .gitignore 文件中，请在构建命令之前将下载命令添加到您的部署脚本中。在这些环境中，您的部署脚本应包含以下两行

php artisan tailwindcss:download
php artisan tailwindcss:build --prod

作为链接头预加载资产

Laravel 10

如果您想将 TailwindCSS 资产预加载到 Laravel 10，请将 AddLinkHeaderForPreloadedAssets 中间件添加到 app/Http/Kernel.php 中的 web 路由组。

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /** ... */
    protected $middlewareGroups = [
        'web' => [
            // ...
            \Tonysm\TailwindCss\Http\Middleware\AddLinkHeaderForPreloadedAssets::class,
        ],

        'api' => [
            // ...
        ],
    ];

    // ...
}

适用于 Laravel 11

如果您想在 Laravel 11 中预加载 TailwindCSS 资产，请将 AddLinkHeaderForPreloadedAssets 中间件添加到 bootstrap/app.php 中的 web 路由组。

    // ...
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->web(append: [
            \Tonysm\TailwindCss\Http\Middleware\AddLinkHeaderForPreloadedAssets::class,
        ]);
    })
    // ...

默认情况下，该软件包会预加载资产。如果您正在链接资产，例如

<link rel="stylesheet" href="{{ tailwindcss('css/app.css') }}">

它将在 HTTP 响应中添加一个 Link 标头，如下所示

Link: <http://localhost/css/app.css>; rel=preload; as=style

它还会保留任何现有的 Link 标头。

如果您想通过 Link 标头禁用预加载，请将标志设置为 false

<link rel="stylesheet" href="{{ tailwindcss('css/app.css', preload: false) }}">

您还可以更改或设置其他属性

<link rel="stylesheet" href="{{ tailwindcss('css/app.css', preload: ['crossorigin' => 'anonymous']) }}">

这将生成一个预加载标头，如下所示

Link: <http://localhost/css/app.css>; rel=preload; as=style; crossorigin=anonymous

在测试时模拟清单

当清单文件缺失时，tailwindcss() 函数将抛出异常。然而，在运行测试时，我们并不总是需要清单文件。您可以在主 TestCase 中使用 InteractsWithTailwind 特性来禁用该异常抛出

<?php

namespace Tests;

use Exception;
use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
use Tonysm\TailwindCss\Testing\InteractsWithTailwind;

abstract class TestCase extends BaseTestCase
{
    use CreatesApplication;
    use InteractsWithTailwind;

    protected function setUp(): void
    {
        parent::setUp();

        $this->withoutTailwind();
    }
}

或者，如果您愿意，您也可以在特定的测试用例中使用该特性，这样我们就可以根据需要切换该行为

<?php

namespace Tests;

use Exception;
use Tests\TestCase;
use Tonysm\TailwindCss\Testing\InteractsWithTailwind;

class ExampleTest extends TestCase
{
    use InteractsWithTailwind;

    /** @test */
    public function throws_exception_when_manifest_is_missing()
    {
        $this->expectException(Exception::class);

        $this->withoutExceptionHandling()
            ->get(route('login'));

        $this->fail('Expected exception to be thrown, but it did not.');
    }

    /** @test */
    public function can_disable_tailwindcss_exception()
    {
        $this->withoutTailwind()
            ->get(route('login'))
            ->assertOk();
    }
}

这两个测试都应该通过。

变更日志

请参阅 CHANGELOG 以获取有关最近更改的更多信息。

贡献

请参阅 CONTRIBUTING 以获取详细信息。

安全漏洞

请查阅我们的安全策略了解如何报告安全漏洞。

鸣谢

许可证

MIT 许可证（MIT）。请参阅许可证文件以获取更多信息。

tonysm / tailwindcss-laravel

维护者

详细信息