Tailwind CSS for Laravel

Introduction

This package wraps the standalone Tailwind CSS CLI tool. No Node.js required.

Inspiration

This package was inspired by the Tailwind CSS for Rails gem.

Installation

You can install the package via composer:

composer require tonysm/tailwindcss-laravel

Next, you may run the install command:

php artisan tailwindcss:install

Optionally, you can publish the config file with:

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

Usage

The package consists of 4 commands and a helper function.

Download the Tailwind CSS Standalone Binary

Since each OS/CPU needs its own version of the compiled binary, the first thing you need to do is run the download command:

php artisan tailwindcss:download

This will detect the correct version based on your OS and CPU architecture.

By default, it will place the binary at the root of your app. The binary will be called tailwindcss. You may want to add that line to your project's .gitignore file.

Alternatively, you may configure the location of this binary file in the config/tailwindcss.php (make sure you export the config file if you want to do that).

Installing the Scaffolding

There are some files needed for the setup to work. On a fresh Laravel application, you may run the install command, like so:

php artisan tailwindcss:install

This will ensure there's a tailwind.config.js file at the root of your project, as well as a resources/css/app.css file with the basic Tailwind CSS setup.

Building

To build the Tailwind CSS styles, you may use the build command:

php artisan tailwindcss:build

By default, that will read your resources/css/app.css file and generate the compiled CSS file at public/css/app.css.

You may want to generate the final CSS file with a digest on the file name for cache busting reasons (ideal for production). You may do so with the --digest flag:

php artisan tailwindcss:build --digest

You may also want to generate a minified version of the final CSS file (ideal for production). You may do so with the --minify flag:

php artisan tailwindcss:build --minify

These two flags will make the ideal production combo. Alternatively, you may prefer using a single --prod flag instead, which is essentially the same thing, but shorter:

php artisan tailwindcss:build --prod

Watching For File Changes

When developing locally, it's handy to run the watch command, which will keep an eye on your local files and run a build again whenever you make a change locally:

php artisan tailwindcss:watch

Note: the watch command is not meant to be used in combination with --digest or --minify flags.

Using the Compiled Asset

To use the compiled asset, you may use the tailwindcss helper function instead of the mix function like so:

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

That should be all you need.

Deploying Your App

When deploying the app, make sure you add the ideal build combo to your deploy script:

php artisan tailwindcss:build --prod

If you're running on a "fresh" app (or an isolated environment, like Vapor), and you have added the binary to your .gitignore file, make sure you also add the download command to your deploy script before the build one. In these environments, your deploy script should have these two lines

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

Preloading Assets as Link Header

For Laravel 10:

If you want to preload the TailwindCSS asset on Laravel 10, add the AddLinkHeaderForPreloadedAssets middleware to your web route group in the app/Http/Kernel.php:

<?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' => [
            // ...
        ],
    ];

    // ...
}

For Laravel 11:

If you want to preload the TailwindCSS asset on Laravel 11, add the AddLinkHeaderForPreloadedAssets middleware to your web route group in the bootstrap/app.php:

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

The package will preload the asset by default. If you're linking an asset like:

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

It will add a Link header to the HTTP response like:

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

It will keep any existing Link header as well.

If you want to disable preloading with the Link header, set the flag to false:

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

You may also change or set additional attributes:

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

This will generate a preloading header like:

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

Mock Manifest When Testing

The tailwindcss() function will throw an exception when the manifest file is missing. However, we don't always need the manifest file when running our tests. You may use the InteractsWithTailwind trait in your main TestCase to disable that exception throwing:

<?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();
    }
}

Alternatively, you may also use the trait on specific test cases if you want to, so we can toggle that behavior as you need:

<?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();
    }
}

Both tests should pass.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Tony Messias
• All Contributors

License

The MIT License (MIT). Please see License File for more information.