Touch Ripple

Tailwind Mobile's Material Theme comes with implementation of Material Design Touch Ripple effect.

It is enabled by default for Material theme.

With these extra utility classes we can control touch ripple "wave" color:

ClassCSS
.touch-ripple-current--twm-touch-ripple-color: rgba(0, 0, 0, 0.1)Inherits touch ripple color from parent element's text color
.touch-ripple-black--twm-touch-ripple-color: rgba(255, 255, 255, 0.15)Makes touch ripple black
.touch-ripple-white--twm-touch-ripple-color: currentColorMakes touch ripple white
.touch-ripple-[color]--twm-touch-ripple-color: rgba([color], 0.25)Makes touch ripple of specified color

For example:

<template>
  <!-- Makes button with red touch ripple -->
  <twm-button class="touch-ripple-red-500">Click me</twm-button>
</template>
<script>
  import { twmButton } from 'tailwind-mobile/vue';

  export default {
    components: {
      twmButton,
    },
  };
</script>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.