PHPackages                             rft/yii2-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. [Utility & Helpers](/categories/utility)
4. /
5. rft/yii2-tailwind

ActiveYii2-extension[Utility & Helpers](/categories/utility)

rft/yii2-tailwind
=================

Tailwind CSS integration for Yii2, compatible with older versions and Bootstrap-neutral.

00PHP

Since Jun 11Pushed 1mo agoCompare

[ Source](https://github.com/zenjaku/yii2-tailwind)[ Packagist](https://packagist.org/packages/rft/yii2-tailwind)[ RSS](/packages/rft-yii2-tailwind/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependenciesVersions (1)Used By (0)

Yii2 Tailwind Extension
=======================

[](#yii2-tailwind-extension)

A Tailwind CSS integration for Yii2, designed for the Advanced Template but compatible with any Yii2 project. Bootstrap-neutral and compatible with older Yii2 versions.

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

[](#installation)

```
composer require rft/yii2-tailwind
```

Setup
-----

[](#setup)

### 1. Asset Registration

[](#1-asset-registration)

In your `frontend/assets/AppAsset.php` and `backend/assets/AppAsset.php`, you can use `TailwindAsset`:

```
public $depends = [
    'rft\tailwind\assets\TailwindAsset',
];
```

For quick development without a build step, use `TailwindPlayAsset`:

```
public $depends = [
    'rft\tailwind\assets\TailwindPlayAsset',
];
```

### 2. Tailwind Configuration

[](#2-tailwind-configuration)

Create a `tailwind.config.js` in your project root:

```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./frontend/views/**/*.php",
    "./backend/views/**/*.php",
    "./common/widgets/**/*.php",
    "./vendor/rft/yii2-tailwind/src/widgets/**/*.php",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}
```

### 3. Usage with Advanced Template

[](#3-usage-with-advanced-template)

This extension provides Tailwind-styled versions of standard Yii2 widgets.

#### Layout (`views/layouts/main.php`)

[](#layout-viewslayoutsmainphp)

```
use rft\tailwind\widgets\NavBar;
use rft\tailwind\widgets\Nav;

NavBar::begin([
    'brandLabel' => Yii::$app->name,
    'brandUrl' => Yii::$app->homeUrl,
]);
echo Nav::widget([
    'items' => [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/about']],
    ],
]);
NavBar::end();
```

#### Forms

[](#forms)

```
use rft\tailwind\widgets\ActiveForm;