JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div>
    <a href="http://npr.org">
        Dennis Nedry
    </a>
    <hr />
    <a href="http://google.co.uk" class="alt">
        John Hammond
    </a>
    <hr />
    <a href="http://google.com/" class="action">
        Lewis Dodgson
    </a>
</div>

SCSS

@mixin link-states($link, $hover: '', $visited: '') {
	color: $link;
    @if $visited == '' {
        $visited: lighten($link, 20%);
    }
    @if $hover == '' {
        $hover: darken($link, 20%);
    }
    
    &:visited {
        color: $visited;
    }
    
    &:hover,
	&:focus {
		color: $hover;
	}
}

a {
    @include link-states(green);
}

a.alt {
    @include link-states(green, red, blue);
}

a.action {
    @include link-states(green, lime, gray);
}