⚙️ Shift to the next TailwindCSS version hassle-free.

  • By Awssat
  • Last update: Dec 30, 2022
  • Comments: 7


  • 1

    Grey vs gray

    From the upgrade docs: "For greys (note that grey has changed to gray 🇺🇸):"

    The config file updates to gray but the string replacer replaces text-grey with text-grey-500.

    Haven't tried to run my converted html yet, so maybe I'm just missing something?

  • 2

    [ci] Bump php versions for phpunit and minor fixes

    The error shown in Travis was:

    This version of PHPUnit is supported on PHP 7.2 and PHP 7.3. You are using PHP 7.1.27 (/home/travis/.phpenv/versions/7.1.27/bin/php). The command "phpunit --coverage-clover clover" exited with 1.

  • 3

    Variants keys not replaced

    The variants config object is reconstructed, but the keys still use the old name, e.g.

        variants: {
            textStyle: ['responsive', 'hover', 'focus', 'group-hover'],


        variants: {
            fontStyle: ['responsive', 'hover', 'focus', 'group-hover'],
  • 4

    Doesn't work on SCSS/SASS

    Possibly also won't work for LESS or other pre-compiled stylesheets.

    The command I ran was: tailwind-shift resources/ --recursive=true --replace=true --extensions="vue,php,scss"

    An example snippet of code in my _common.scss file (I have several SASS files for different parts of the app, but _common.scss shares common styles and components that are then @imported into the other SASS files):

    @responsive {
        .button-blue {
            @apply .bg-blue .text-white;
            &:hover {
                @apply .bg-blue-dark .text-white;
            &[disabled] {
                @apply .bg-blue-lightest .text-blue-dark;
  • 5

    Shift regex too greedy

    Hi there,

    I noticed while running v1.0.3 that things were being changed that had nothing to do with Tailwind. Some of these files had previously been run through a shift but some had not, so I don't think that is a factor.

    Here are some examples:

    SVG's xmlns (or any URL that has a colon): Screen Shot 2019-04-22 at 1 05 07 PM

    Laravel facade: Screen Shot 2019-04-22 at 1 05 25 PM

    Vue component keys (name, props, components, filters, etc.): Screen Shot 2019-04-22 at 1 05 39 PM

    Random words with a colon right after: Screen Shot 2019-04-22 at 1 06 19 PM

    If there was a space after the colon it was leaving the space, which I found odd. It should probably take out the space as well.

    I'm also seeing some of my custom components being changed if I used a color in their name. For example, button-orange would be changed to button-orange-500.

  • 6

    Colors being removed from bg- border- text-

    Uses of color in border, text and bg are being replaced by the type, removing the color.

    tailwind-shift '<div class="border-green-darker">'
    Converted Code: <div class="border-border-800">

    expected: <div class="border-green-800">

    same is true for bg-, text-

  • 7

    Multiline conditional Vue classes ignored

    Conditional classes seem to be ignored if they're multi-line. When they're on a single line they appear to be replaced.

            class="group cursor-pointer bg-grey-500"
                    'border-l border-grey-light': !isResponse,
                    'ml-8 md:ml-16 border-l border-teal': isResponse