PHPackages                             tonysm/tailwindcss-laravel - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. tonysm/tailwindcss-laravel

ActiveLibrary[Utility & Helpers](/categories/utility)

tonysm/tailwindcss-laravel
==========================

This package wraps up the standalone executable version of the Tailwind CSS framework.

2.3.0(2mo ago)26613.3k↓36.5%10[3 issues](https://github.com/tonysm/tailwindcss-laravel/issues)[1 PRs](https://github.com/tonysm/tailwindcss-laravel/pulls)1MITPHPPHP ^8.2CI passing

Since Feb 3Pushed 1mo ago6 watchersCompare

[ Source](https://github.com/tonysm/tailwindcss-laravel)[ Packagist](https://packagist.org/packages/tonysm/tailwindcss-laravel)[ Docs](https://github.com/tonysm/tailwindcss-laravel)[ GitHub Sponsors](https://github.com/tonysm)[ RSS](/packages/tonysm-tailwindcss-laravel/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (8)Versions (36)Used By (1)

Tailwind CSS for Laravel
========================

[](#tailwind-css-for-laravel)

 [![Total Downloads](https://camo.githubusercontent.com/f9eb747aa9c4495e75b92529803205dac7f98097f94985b8daa2aaf5cc503c23/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f746f6e79736d2f7461696c77696e646373732d6c61726176656c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tonysm/tailwindcss-laravel) [![Latest Stable Version](https://camo.githubusercontent.com/5206218f04f3c79c95d6fa04ef4d65f98e23daeb4874bacdbe385dab46057a54/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f746f6e79736d2f7461696c77696e646373732d6c61726176656c)](https://packagist.org/packages/tonysm/tailwindcss-laravel) [![License](https://camo.githubusercontent.com/da9d97d8d60708817f34f00a671352e292e3ec27d2f631e4f5dd2f2895e97f03/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f746f6e79736d2f7461696c77696e646373732d6c61726176656c)](https://packagist.org/packages/tonysm/tailwindcss-laravel)

Introduction
------------

[](#introduction)

This package wraps the standalone [Tailwind CSS CLI tool](https://tailwindcss.com/blog/standalone-cli). No Node.js required.

### Inspiration

[](#inspiration)

This package was inspired by the [Tailwind CSS for Rails](https://github.com/rails/tailwindcss-rails) gem.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require tonysm/tailwindcss-laravel
```

*Attention: Version 2.x requires Tailwind V4. Make sure your application was upgraded to it or install version 1.x instead.*

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
-----

[](#usage)

The package consists of 4 commands and a helper function.

### Download the Tailwind CSS Standalone Binary

[](#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

[](#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 publish a new `resources/css/app.css` main Tailwind CSS file. Make sure you [upgrade your application to Tailwind V4](https://tailwindcss.com/docs/upgrade-guide).

### Building

[](#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

[](#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

[](#using-the-compiled-asset)

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

```
-
+
```

That should be all you need.

### Deploying Your App

[](#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

[](#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`:

```