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. zaknesler/tailwind-preset

AbandonedArchivedLibrary

zaknesler/tailwind-preset
=========================

A Tailwind CSS preset for Laravel.

v7.2.1(5y ago)326.5k↓50%7MITPHPPHP ^7.2

Since May 24Pushed 5y ago4 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 1mo 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

38

—

LowBetter than 85% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity34

Limited adoption so far

Community14

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

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

[barryvdh/laravel-ide-helper

Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion.

14.9k123.0M685](/packages/barryvdh-laravel-ide-helper)[laravel/ui

Laravel UI utilities and presets.

2.7k134.9M599](/packages/laravel-ui)[laravel/jetstream

Tailwind scaffolding for the Laravel framework.

4.1k19.8M136](/packages/laravel-jetstream)[laravel-frontend-presets/tall

TALL preset for Laravel.

2.6k692.9k1](/packages/laravel-frontend-presets-tall)[tucker-eric/eloquentfilter

An Eloquent way to filter Eloquent Models

1.8k4.8M26](/packages/tucker-eric-eloquentfilter)[erag/laravel-disposable-email

A Laravel package to detect and block disposable email addresses.

226102.4k](/packages/erag-laravel-disposable-email)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)