Tailwind教程之10 - 各种特效

下面说说如何在Tailwind中实现各种特殊效果。

对Hover事件的相应

只要在所有的Tailwind类之前加上hover: 就可以了：

css

<div class="hover:text-gray-800 hover:text-xl">xxxx</div>

如果针对的是某类组件，最好统一定义在styles.css中：

css

.product {
  @apply rounded-lg shadow-lg hover:shadow-xl;
}

Transition

Transition是需要和别的效果配套使用的，比如：

markup

<dive class="hover:bg-blue hover:text-white transition ease-out duration-1000">Load</a>

同时还可以使用scale（缩放）效果：

markup

<div class="button tranform hover:scale-150">Show details</div>

也可以和前面的transition一同使用：

markup

<div class="button tranform hover:scale-150 hover:bg-opacity-60 transition ease-linear duration-1000">Show details</div>

阴影

• shadow
• shadow-xl

圆角

• rounded-lg
• rounded-full