rft/yii2-tailwind

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

dev-main 2026-06-11 05:42 UTC

Requires

• php: >=7.1.0
• yiisoft/yii2: ~2.0.0

MIT

• rft

• extension
• yii2
• tailwind
• tailwindcss
• bootstrap-neutral

README

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

composer require rft/yii2-tailwind

Setup

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

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

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

Layout (views/layouts/main.php)

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

use rft\tailwind\widgets\ActiveForm;

<?php $form = ActiveForm::begin(); ?>
    <?= $form->field($model, 'username') ?>
    <?= $form->field($model, 'password')->passwordInput() ?>
    <div class="form-group">
        <?= Html::submitButton('Login', ['class' => 'inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']) ?>
    </div>
<?php ActiveForm::end(); ?>

GridView

use rft\tailwind\widgets\GridView;

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        'id',
        'name',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

Bootstrap Neutrality

This package does NOT require yiisoft/yii2-bootstrap*. If you want to use it alongside Bootstrap, you can, but it is designed to work as a standalone UI solution.