PHPackages                             craftpulse/craft-tailwind - 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. [Templating & Views](/categories/templating)
4. /
5. craftpulse/craft-tailwind

ActiveCraft-plugin[Templating & Views](/categories/templating)

craftpulse/craft-tailwind
=========================

Tailwind CSS class merging and named-slot class builder for Craft CMS 5

5.0.1(3w ago)12proprietaryPHPPHP ^8.2CI passing

Since May 13Pushed 3w agoCompare

[ Source](https://github.com/craftpulse/craft-tailwind)[ Packagist](https://packagist.org/packages/craftpulse/craft-tailwind)[ RSS](/packages/craftpulse-craft-tailwind/feed)WikiDiscussions v5 Synced 1w ago

READMEChangelog (2)Dependencies (7)Versions (4)Used By (0)

Tailwind for Craft CMS
======================

[](#tailwind-for-craft-cms)

Server-side Tailwind CSS class merging for Craft CMS 5 templates. Resolves conflicting utility classes, organizes styles into named slots, and injects CSS custom properties -- all without client-side JavaScript.

[![Screenshot](resources/img/tailwind-banner.png)](resources/img/tailwind-banner.png)

What it solves
--------------

[](#what-it-solves)

### Component overrides without conflicts

[](#component-overrides-without-conflicts)

A button component defines default colors. A page template wants to override just the color, but concatenating classes produces `bg-brand-accent bg-red-500` -- both classes render, the cascade picks a winner unpredictably, and the source is impossible to reason about.

With craft-tailwind, the merge engine understands which utilities conflict and keeps only the last one per CSS property:

```
{# _components/button.twig #}
{% set classes = craft.tailwind.classes({
    layout: 'inline-flex items-center gap-2',
    color: 'bg-brand-accent text-white',
    radius: 'rounded-sm',
    spacing: 'py-2 px-4',
}) %}

{# Override just the color slot -- layout, radius, spacing stay intact #}
{% set classes = classes.override({ color: 'bg-red-600 text-white' }) %}

Submit
{# Output: inline-flex items-center gap-2 bg-red-600 text-white rounded-sm py-2 px-4 #}
```

### Dynamic colors without safelisting

[](#dynamic-colors-without-safelisting)

A CMS field lets editors pick a brand color. Tailwind tree-shakes unused classes at build time, so writing `bg-{{ color }}` produces nothing -- the class never made it into the build.

CSS custom properties sidestep this entirely. Define your palette once in plugin settings, reference the variables in your templates with arbitrary value syntax, and swap values at runtime:

```
{# Inject CSS variables into the page head -- no |raw needed #}
{{ craft.tailwind.include() }}

{# Use arbitrary value syntax -- these classes ARE in the build #}

    Editor-chosen colors, no safelisting required.

```

### Form field modifiers

[](#form-field-modifiers)

A form input has default styling. Error state needs a red border. Disabled state needs muted colors. Without merge, layering modifier classes means manually tracking which base classes to remove:

```
{% set base = 'border border-gray-300 rounded-md px-3 py-2 text-sm' %}
{% set error = 'border-red-500 ring-1 ring-red-500' %}
{% set disabled = 'bg-gray-100 text-gray-400 cursor-not-allowed' %}

{# Merge resolves border-gray-300 vs border-red-500 automatically #}

```

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

[](#installation)

You can install Tailwind via the **Plugin Store** in the Craft control panel, or from the command line.

**With DDEV:**

```
ddev composer require craftpulse/craft-tailwind
ddev craft plugin/install tailwind
```

**Without DDEV:**

```
composer require craftpulse/craft-tailwind
php craft plugin/install tailwind
```

Tailwind works on Craft 5.x and requires PHP 8.2 or later.

Configuration
-------------

[](#configuration)

Settings can be managed through the control panel (Settings > Plugins > Tailwind) or via a config file. File-based configuration takes precedence over CP settings.

### Config file

[](#config-file)

Create `config/tailwind.php`:

```