Last active
June 30, 2021 08:09
-
-
Save snellingio/70487b54fe7d339920fad2ac8129e635 to your computer and use it in GitHub Desktop.
states
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const plugin = require('tailwindcss/plugin') | |
module.exports = { | |
mode: 'jit', | |
purge: ['./resources/**/*.{js,vue,blade.php}'], | |
darkMode: false, // or 'media' or 'class' | |
theme: { | |
extend: {}, | |
}, | |
variants: { | |
states: ['error', 'loading'], | |
extend: { | |
}, | |
}, | |
plugins: [ | |
plugin(function({ variants, addVariant, e }) { | |
for(let state of variants('states')) { | |
addVariant(state, ({modifySelectors, separator}) => { | |
modifySelectors(({className}) => { | |
return `.${e(`state${separator}${state}`)} .${e(`${state}${separator}${className}`)}` | |
}) | |
}) | |
} | |
}), | |
], | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class=""> | |
<label class="flex rounded border error:border-red-300"> | |
<input class="flex-grow py-1 px-3 rounded focus:outline-none"/> | |
<div class="hidden items-center px-2 error:flex"> | |
<!-- Heroicon name: solid/exclamation-circle --> | |
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500" viewBox="0 0 20 20" fill="currentColor"> | |
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /> | |
</svg> | |
</div> | |
<div class="hidden items-center px-2 loading:flex"> | |
<!-- Spinner --> | |
<svg class="animate-spin h-5 w-5 text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> | |
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> | |
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> | |
</svg> | |
</div> | |
</label> | |
</div> | |
<div class="state:error"> | |
<label class="flex rounded border error:border-red-300"> | |
<input class="flex-grow py-1 px-3 rounded focus:outline-none"/> | |
<div class="hidden items-center px-2 error:flex"> | |
<!-- Heroicon name: solid/exclamation-circle --> | |
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500" viewBox="0 0 20 20" fill="currentColor"> | |
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /> | |
</svg> | |
</div> | |
<div class="hidden items-center px-2 loading:flex"> | |
<!-- Spinner --> | |
<svg class="animate-spin h-5 w-5 text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> | |
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> | |
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> | |
</svg> | |
</div> | |
</label> | |
</div> | |
<div class="state:loading"> | |
<label class="flex rounded border error:border-red-300"> | |
<input class="flex-grow py-1 px-3 rounded focus:outline-none"/> | |
<div class="hidden items-center px-2 error:flex"> | |
<!-- Heroicon name: solid/exclamation-circle --> | |
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500" viewBox="0 0 20 20" fill="currentColor"> | |
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /> | |
</svg> | |
</div> | |
<div class="hidden items-center px-2 loading:flex"> | |
<!-- Spinner --> | |
<svg class="animate-spin h-5 w-5 text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> | |
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> | |
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> | |
</svg> | |
</div> | |
</label> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment