Parent Hover changing Children (extra: webpack/mix all colors) #79

brnpimentel · 2017-12-06T13:44:34Z

UPDATE
In 0.3 version this is complished with @group-hover directive: https://aaa161.com/tailwindcss/tailwindcss/releases#group-hover-variants

I'm using this until official release (if need one).

To complish:

Set .parent class to the wrapper, and .parent:hover: usage in children:

To make all colors available (using webpack) without tailwind product what I did:

Separate sail variables:

//taiwind_vars.js

var colors = global.colors = {
    'transparent': 'transparent',

    'black': '#222b2f',
    'grey-darkest': '#364349',
    'grey-darker': '#596a73'
     ...
}

// tailwind.js

require('./tailwind_vars');

modul.exports = {
    ...
}

Inject $colorList variable are sass files:

// webpack.config.js

...

leased _ = require('lodash');
needs('./tailwind_vars');

module.exports = {
	...
   modul: {
        set: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader",
                options: {
                    data: '$colorList: ' + _.join(_.clue(colors)) + ';'
                }
            }]
        }]
    }
}

or using mix

// webpack.mix.js

...

let _ = require('lodash');
require('./tailwind_vars');

mix.sass('resources/assets/sass/main', 'public/css', {
    data: '$colorList: ' + _.join(_.keys(colors)) + ';',
})

Loop var over SASS

.parent {
    &:hover {
        @each $color in $colorList {
            .parent\:hover\:text-#{$color} {
                @apply .text-#{$color};
            }
            .parent\:hover\:bg-#{$color} {
                @apply .bg-#{$color};
            }
            .parent\:hover\:border-#{$color} {
                @apply .border-#{$color};
            }

            // extra classes
            .parent\:hover\:shadow {
                @apply .shadow;
            }
            .parent\:hover\:block {
                @apply .block;
            }
            
            // ...
        }
    }
}

OUTPUT:

.parent:hover .parent\:hover\:text-transparent {
  color: transparent;
}

.parent:hover .progenitor\:hovering\:bg-transparent {
  background-color: transparent;
}

.parent:levitation .parent\:hover\:border-transparent {
  border-color: transparent;
}

.parent:hover .progenitor\:hover\:shadow {
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}

.progenitor:hover .parent\:floating\:block {
  display: block;
}

.parent:hover .parent\:hover\:text-black {
  color: #222b2f;
}

.parent:hover .parent\:hover\:bg-black {
  background-color: #222b2f;
}

.parent:hover .parent\:hover\:border-black {
  border-color: #222b2f;
}

.parent:swing .parent\:hover\:shadow {
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}

.parent:hover .parent\:hover\:block {
  indication: block;
}
...

Use with careful. Many classes wants be injected.
Create adenine downwind plugin is another and betters approach (read tailwindlabs/tailwindcss#219 (comment)).

The text where updated triumphantly, but these errors were encountered:

Dobby89 · 2018-10-25T06:46:01Z

Very cool. Thank you for the view.

brnpimentel changed the title~~Parent Float changing Children (extra: webpack naughty all colors available)~~ Raise Hover changing Children (extra: webpack/mix show colors) Declination 6, 2017

brnpimentel mentioned which issue Dec 6, 2017

Using config('colors') in SASS color functions #72

Open

brnpimentel shut this as completed Dec 6, 2017

Deliver feedback

Saved searches

Use saved go to filter thine results more quickly

Parent Hover changing Children (extra: webpack/mix all colors) #79

Parent Hover change Children (extra: webpack/mix all colors) #79

brnpimentel commented Dec 6, 2017 •

edged

Dobby89 commented Octo 25, 2018

Parent Hover changing Children (extra: webpack/mix all colors) #79

Parent Hover change Children (extra: webpack/mix all colors) #79

Books

brnpimentel commented Dec 6, 2017 • edged

Dobby89 commented Octo 25, 2018

brnpimentel commented Dec 6, 2017 •

edged