{"id":17161012,"url":"https://github.com/tonysm/tailwindcss-laravel","last_synced_at":"2025-05-15T11:07:28.569Z","repository":{"id":40572133,"uuid":"454203710","full_name":"tonysm/tailwindcss-laravel","owner":"tonysm","description":"This package wraps up the standalone executable version of the Tailwind CSS framework for a Laravel application.","archived":false,"fork":false,"pushed_at":"2025-04-08T14:05:27.000Z","size":210,"stargazers_count":263,"open_issues_count":2,"forks_count":9,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-14T19:58:49.422Z","etag":null,"topics":["hacktoberfest","laravel","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tonysm.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"tonysm"}},"created_at":"2022-01-31T23:26:45.000Z","updated_at":"2025-04-08T14:05:32.000Z","dependencies_parsed_at":"2024-04-29T16:27:07.955Z","dependency_job_id":"cd23e378-fc04-4e84-81fb-68c96b81c922","html_url":"https://github.com/tonysm/tailwindcss-laravel","commit_stats":{"total_commits":74,"total_committers":7,"mean_commits":"10.571428571428571","dds":0.3918918918918919,"last_synced_commit":"bb28233efc091f9fa6be5beac47fbfb1de80ebd7"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":"spatie/package-skeleton-laravel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysm%2Ftailwindcss-laravel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysm%2Ftailwindcss-laravel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysm%2Ftailwindcss-laravel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tonysm%2Ftailwindcss-laravel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tonysm","download_url":"https://codeload.github.com/tonysm/tailwindcss-laravel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328384,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","laravel","tailwindcss"],"created_at":"2024-10-14T22:26:50.349Z","updated_at":"2025-05-15T11:07:28.519Z","avatar_url":"https://github.com/tonysm.png","language":"PHP","funding_links":["https://github.com/sponsors/tonysm"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eTailwind CSS for Laravel\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://packagist.org/packages/tonysm/tailwindcss-laravel\"\u003e\n        \u003cimg src=\"https://img.shields.io/packagist/dt/tonysm/tailwindcss-laravel.svg?style=flat-square\" alt=\"Total Downloads\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/tonysm/tailwindcss-laravel\"\u003e\n        \u003cimg src=\"https://img.shields.io/packagist/v/tonysm/tailwindcss-laravel\" alt=\"Latest Stable Version\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/tonysm/tailwindcss-laravel\"\u003e\n        \u003cimg src=\"https://img.shields.io/packagist/l/tonysm/tailwindcss-laravel\" alt=\"License\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Introduction\n\nThis package wraps the standalone [Tailwind CSS CLI tool](https://tailwindcss.com/blog/standalone-cli). No Node.js required.\n\n### Inspiration\n\nThis package was inspired by the [Tailwind CSS for Rails](https://github.com/rails/tailwindcss-rails) gem.\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require tonysm/tailwindcss-laravel\n```\n\n_Attention: Version 2.x requires Tailwind V4. Make sure your application was upgraded to it or install version 1.x instead._\n\nNext, you may run the install command:\n\n```bash\nphp artisan tailwindcss:install\n```\n\nOptionally, you can publish the config file with:\n\n```bash\nphp artisan vendor:publish --tag=\"tailwindcss-config\"\n```\n\n## Usage\n\nThe package consists of 4 commands and a helper function.\n\n### Download the Tailwind CSS Standalone Binary\n\nSince each OS/CPU needs its own version of the compiled binary, the first thing you need to do is run the download command:\n\n```bash\nphp artisan tailwindcss:download\n```\n\nThis will detect the correct version based on your OS and CPU architecture.\n\nBy 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.\n\nAlternatively, 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).\n\n### Installing the Scaffolding\n\nThere are some files needed for the setup to work. On a fresh Laravel application, you may run the install command, like so:\n\n```bash\nphp artisan tailwindcss:install\n```\n\nThis 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).\n\n### Building\n\nTo build the Tailwind CSS styles, you may use the build command:\n\n```bash\nphp artisan tailwindcss:build\n```\n\nBy default, that will read your `resources/css/app.css` file and generate the compiled CSS file at `public/css/app.css`.\n\nYou 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:\n\n```bash\nphp artisan tailwindcss:build --digest\n```\n\nYou may also want to generate a minified version of the final CSS file (ideal for production). You may do so with the `--minify` flag:\n\n```bash\nphp artisan tailwindcss:build --minify\n```\n\nThese 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:\n\n```bash\nphp artisan tailwindcss:build --prod\n```\n\n### Watching For File Changes\n\nWhen 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:\n\n```bash\nphp artisan tailwindcss:watch\n```\n\n_Note: the watch command is not meant to be used in combination with `--digest` or `--minify` flags._\n\n### Using the Compiled Asset\n\nTo use the compiled asset, you may use the `tailwindcss` helper function instead of the `mix` function like so:\n\n```diff\n- \u003clink rel=\"stylesheet\" href=\"{{ mix('css/app.css') }}\" \u003e\n+ \u003clink rel=\"stylesheet\" href=\"{{ tailwindcss('css/app.css') }}\" \u003e\n```\n\nThat should be all you need.\n\n### Deploying Your App\n\nWhen deploying the app, make sure you add the ideal build combo to your deploy script:\n\n```bash\nphp artisan tailwindcss:build --prod\n```\n\nIf 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\n\n```bash\nphp artisan tailwindcss:download\nphp artisan tailwindcss:build --prod\n```\n\n### Preloading Assets as Link Header\n\n**For Laravel 10:**\n\nIf 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`:\n\n```php\n\u003c?php\n\nnamespace App\\Http;\n\nuse Illuminate\\Foundation\\Http\\Kernel as HttpKernel;\n\nclass Kernel extends HttpKernel\n{\n    /** ... */\n    protected $middlewareGroups = [\n        'web' =\u003e [\n            // ...\n            \\Tonysm\\TailwindCss\\Http\\Middleware\\AddLinkHeaderForPreloadedAssets::class,\n        ],\n\n        'api' =\u003e [\n            // ...\n        ],\n    ];\n\n    // ...\n}\n```\n\n**For Laravel 11:**\n\nIf you want to preload the TailwindCSS asset on Laravel 11, add the `AddLinkHeaderForPreloadedAssets` middleware to your `web` route group in the `bootstrap/app.php`:\n\n```php\n    // ...\n    -\u003ewithMiddleware(function (Middleware $middleware) {\n        $middleware-\u003eweb(append: [\n            \\Tonysm\\TailwindCss\\Http\\Middleware\\AddLinkHeaderForPreloadedAssets::class,\n        ]);\n    })\n    // ...\n```\n\nThe package will preload the asset by default. If you're linking an asset like:\n\n```blade\n\u003clink rel=\"stylesheet\" href=\"{{ tailwindcss('css/app.css') }}\"\u003e\n```\n\nIt will add a Link header to the HTTP response like:\n\n```http\nLink: \u003chttp://localhost/css/app.css\u003e; rel=preload; as=style\n```\n\nIt will keep any existing `Link` header as well.\n\nIf you want to disable preloading with the Link header, set the flag to `false`:\n\n```blade\n\u003clink rel=\"stylesheet\" href=\"{{ tailwindcss('css/app.css', preload: false) }}\"\u003e\n```\n\nYou may also change or set additional attributes:\n\n```blade\n\u003clink rel=\"stylesheet\" href=\"{{ tailwindcss('css/app.css', preload: ['crossorigin' =\u003e 'anonymous']) }}\"\u003e\n```\n\nThis will generate a preloading header like:\n\n```http\nLink: \u003chttp://localhost/css/app.css\u003e; rel=preload; as=style; crossorigin=anonymous\n```\n\n### Mock Manifest When Testing\n\nThe `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:\n\n```php\n\u003c?php\n\nnamespace Tests;\n\nuse Exception;\nuse Illuminate\\Foundation\\Testing\\TestCase as BaseTestCase;\nuse Tonysm\\TailwindCss\\Testing\\InteractsWithTailwind;\n\nabstract class TestCase extends BaseTestCase\n{\n    use CreatesApplication;\n    use InteractsWithTailwind;\n\n    protected function setUp(): void\n    {\n        parent::setUp();\n\n        $this-\u003ewithoutTailwind();\n    }\n}\n```\n\nAlternatively, you may also use the trait on specific test cases if you want to, so we can toggle that behavior as you need:\n\n```php\n\u003c?php\n\nnamespace Tests;\n\nuse Exception;\nuse Tests\\TestCase;\nuse Tonysm\\TailwindCss\\Testing\\InteractsWithTailwind;\n\nclass ExampleTest extends TestCase\n{\n    use InteractsWithTailwind;\n\n    /** @test */\n    public function throws_exception_when_manifest_is_missing()\n    {\n        $this-\u003eexpectException(Exception::class);\n\n        $this-\u003ewithoutExceptionHandling()\n            -\u003eget(route('login'));\n\n        $this-\u003efail('Expected exception to be thrown, but it did not.');\n    }\n\n    /** @test */\n    public function can_disable_tailwindcss_exception()\n    {\n        $this-\u003ewithoutTailwind()\n            -\u003eget(route('login'))\n            -\u003eassertOk();\n    }\n}\n```\n\nBoth tests should pass.\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Tony Messias](https://github.com/tonysm)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonysm%2Ftailwindcss-laravel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonysm%2Ftailwindcss-laravel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonysm%2Ftailwindcss-laravel/lists"}