Skip to content
⚙️ Shift to the next TailwindCSS version hassle-free.
Branch: master
Clone or download
Latest commit e9f6247 May 19, 2019

Tailwind Shift


Latest Version on Packagist StyleCI Build Status

A helper tool to upgrade your current codes of a project to latest version of TailwindCSS without a hassle. It's currently support shifting from 0.7.x to 1.0

Installing tailwind-shift

You can install the package via composer globally:

$ composer global require awssat/tailwind-shift

Then use it to upgrade/convert a snippet, a file or a folder.

How to Use to upgrade your project

Upgrade TailwindCSS config file

TailwindShift offers a command to upgrade your config file, to use it:

$ tailwind-shift tailwind.js --fixconfig=true

This will generate a new file called, check the file and rename it if everything is ok.

Upgrade views templates

$ tailwind-shift path/to/views/ --recursive=true --extensions=vue,php,html

This will generate new files (i.e: as a safety procedure, you could use --replace=true to overwrite old files.

Advanced Uses of the command

Possible Options

Update a directory (just the files in this directory, it's not recursive)

$ tailwind-shift path/to/directory/ 

Recursively update a directory

$ tailwind-shift path/to/directory/ --recursive=true

You can also use the short hand -r true instead of the full --recursive=true

Update different file extensions

This will allow you to upgrade your vue, twig, css files and more!

$ tailwind-shift path/to/directory/ --extensions=vue,php,html

You can also use the short hand -e vue,php,html instead of the full --extensions

Overwrite the original files

Please note this can be considered a destructive action as it will replace the orignal file and will not leave a copy of the original any where.

$ tailwind-shift path/to/directory/ --replace=true

Update raw code

just a snippet of code:

$ tailwind-shift '<div class="text-grey pin-t"></div>'

update a file

By default this will copy the code into a new file like file.html ->

$ tailwind-shift file.blade.php

This option works with the --replace=true option

Using the package in your project (If that's what your want)

You can install the package via composer locally in your project folder:

$ composer require awssat/tailwind-shift

Then use it like this:

use Awssat\TailwindShift\Updater;

$input = '<div class="text-grey pin-t">hi</div>'; //old tailwindcss code

$output = (new Updater)
            ->get(); // gets new updated code


The MIT License (MIT). Please see License File for more information.

You can’t perform that action at this time.