PHPackages zaknesler/tailwind-preset - 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. zaknesler/tailwind-preset AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) zaknesler/tailwind-preset ========================= A Tailwind CSS preset for Laravel. v7.2.1(5y ago)316.6k↓73.1%7MITPHPPHP ^7.2 Since May 24Pushed 5y ago1 watchersCompare [ Source](https://github.com/zaknesler/tailwind-preset)[ Packagist](https://packagist.org/packages/zaknesler/tailwind-preset)[ RSS](/packages/zaknesler-tailwind-preset/feed)WikiDiscussions master Synced 2d ago READMEChangelog (10)Dependencies (4)Versions (31)Used By (0) Tailwind CSS Laravel Front-end Preset ------------------------------------- [](#tailwind-css-laravel-front-end-preset) [![Latest Stable Version](https://camo.githubusercontent.com/a10bffad93bee5e530e6b86b68342a598871c09442bd294e737bea458c9eaec9/68747470733a2f2f706f7365722e707567782e6f72672f7a616b6e65736c65722f7461696c77696e642d7072657365742f762f737461626c65)](https://packagist.org/packages/zaknesler/tailwind-preset) [![Total Downloads](https://camo.githubusercontent.com/791f6941f37876d9f26ae1b8c41f9723bfaebf4dc36d8748060436e668884a06/68747470733a2f2f706f7365722e707567782e6f72672f7a616b6e65736c65722f7461696c77696e642d7072657365742f646f776e6c6f616473)](https://packagist.org/packages/zaknesler/tailwind-preset) [![License](https://camo.githubusercontent.com/a1e7f756a9f760ae017bf0fb772d97b6792e19a895a0c7a0bdc305618a8fe8c5/68747470733a2f2f706f7365722e707567782e6f72672f7a616b6e65736c65722f7461696c77696e642d7072657365742f6c6963656e7365)](https://packagist.org/packages/zaknesler/tailwind-preset) Laravel 7+ front-end preset for [Tailwind CSS](https://tailwindcss.com). Includes Vue.js (and an example component), a clean and fully-responsive UI, and the utilization of Blade components to reduce code duplication. This preset also uses Laravel Mix to compile and minify assets. Tailwind comes packaged with PurgeCSS, and this preset is configured to purge the proper files. > This preset is built for Laravel 7 and up. For Laravel 5 or 6, please use [version 5.0](https://github.com/zaknesler/tailwind-preset/tree/v5.0.0). **[Example Repository](https://github.com/zaknesler/tw-preset-demo)** View preview screenshots[![Welcome View](https://user-images.githubusercontent.com/7189795/91107549-8b26e200-e643-11ea-82f7-27ef51da169d.png)](https://user-images.githubusercontent.com/7189795/91107549-8b26e200-e643-11ea-82f7-27ef51da169d.png) [![Login View](https://user-images.githubusercontent.com/7189795/91107547-8b26e200-e643-11ea-9684-fe576feb187b.png)](https://user-images.githubusercontent.com/7189795/91107547-8b26e200-e643-11ea-9684-fe576feb187b.png) [![Home View](https://user-images.githubusercontent.com/7189795/91107546-8b26e200-e643-11ea-9a38-8d5007c3f6c5.png)](https://user-images.githubusercontent.com/7189795/91107546-8b26e200-e643-11ea-9a38-8d5007c3f6c5.png) [![Responsive Nav](https://user-images.githubusercontent.com/7189795/91107548-8b26e200-e643-11ea-8f40-48449450dc60.png)](https://user-images.githubusercontent.com/7189795/91107548-8b26e200-e643-11ea-8f40-48449450dc60.png) ### Warning [](#warning) > Laravel presets are designed to be installed onto a fresh instance of Laravel. This preset will **overwrite** your existing views, assets, and Home controller. Please use with caution. ### Installation [](#installation) 1. Require the composer dependency. Laravel will automatically register the package. ``` composer require zaknesler/tailwind-preset --dev ``` 2. Install the preset: ``` php artisan ui tailwind --auth # Without authentication scaffolding php artisan ui tailwind ``` 3. Install the npm dependencies using your preferred package manager: ``` # Using Yarn yarn # Using npm npm install ``` 4. Compile assets: ``` # Using Yarn yarn dev # Using npm npm run dev ``` ### Customization [](#customization) Tailwind is built to be fully customizable, and thus, the `tailwind.config.js` file that comes with this preset includes a handful of customizations to help get you started. These include adding [Inter](https://fonts.google.com/specimen/Inter) to the default font stack, a `theme` color palette for quick customization, as well as configuration for the [Tailwind custom-forms](https://tailwindcss-custom-forms.netlify.app/) plugin. The `theme` color palette, by default, simply destructures Tailwind's blue color palette, but can be easily swapped out for your own color palette. For more information, visit the [Tailwind color customization page](https://tailwindcss.com/docs/customizing-colors). This preset is designed to utilize many Tailwind features, including using a plugin, overriding default theme values, extracting components using `@apply`, and configuration for PurgeCSS. To really get the most out of Tailwind, you need to use it! Take a deep dive into Tailwind's [incredible documentation](https://tailwindcss.com/docs/installation), and most importantly... get your hands dirty with it! I hope this preset helps you out! ### Health Score 37 — LowBetter than 81% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity33 Limited adoption so far Community12 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 80.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~29 days Recently: every ~3 days Total 30 Last Release 2124d ago Major Versions v2.3.0 → v3.0.02019-05-13 v3.1.0 → v4.0.02019-06-16 v4.2.0 → v5.0.02019-11-14 v5.0.0 → v6.0.02020-05-01 v6.0.0 → v7.0.02020-08-25 ### Community Maintainers ![](https://www.gravatar.com/avatar/5354591b27072de79689793211f5f156ef001226b850d67fba15fc5e59b8ddb0?d=identicon)[zaknesler](/maintainers/zaknesler) --- Top Contributors [![zaknesler](https://avatars.githubusercontent.com/u/7189795?v=4)](https://github.com/zaknesler "zaknesler (84 commits)")[![zaknes](https://avatars.githubusercontent.com/u/64446146?v=4)](https://github.com/zaknes "zaknes (20 commits)") --- Tags laravellaravel-frontend-presetslaravel-mixpresetspurgecsstailwindcssvuejslaraveltailwindtailwindcsspreset ### Embed Badge ![Health badge](/badges/zaknesler-tailwind-preset/health.svg) ``` [![Health](https://phpackages.com/badges/zaknesler-tailwind-preset/health.svg)](https://phpackages.com/packages/zaknesler-tailwind-preset) ``` ### Alternatives [laravel/ai The official AI SDK for Laravel. 1.0k3.2M193](/packages/laravel-ai)[illuminate/queue The Illuminate Queue package. 21332.6M1.6k](/packages/illuminate-queue)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9762.4M131](/packages/roots-acorn)[moonshine/moonshine Laravel administration panel 1.3k253.1k81](/packages/moonshine-moonshine)[laravel/folio Page based routing for Laravel. 603583.7k33](/packages/laravel-folio)[erag/laravel-lang-sync-inertia A powerful Laravel package for syncing and managing language translations across backend and Inertia.js (Vue/React/Svelte) frontends, offering effortless localization, auto-sync features, and smooth multi-language support for modern Laravel applications. 4925.3k](/packages/erag-laravel-lang-sync-inertia) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)