In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered.

  <p class="mb-4">

    I am a <a class="text-purple hover:text-orange focus:bg-yellow" href="#">text link</a>.

  </p>

  <button class="block w-full py-2 px-4 rounded-sm mb-2 text-white bg-purple-light hover:bg-black" tabindex="0">

    Click me

  </button>

[Tailwind] Style Elements on hover and focus with Tailwind’s State Variants的更多相关文章

  1. chrome控制台模拟hover、focus、active等状态，方便调试

    有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...

  2. Quick Tip: Outline Elements on Hover

    How to get the xpath by clicking an html element How to get the xpath by clicking an html element Qu ...

  3. 伪样式：hover ,:active,:focus

    <!doctype html>无标题文档 #name:focus { background: #0F6 } #password:hover { background: #F00 } #pa ...

  4. [Tailwind] Abstract Utility Classes to BEM Components in Tailwind

    When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In thi ...

  5. [Tailwind] Control What Variations are Generated for Each Utility Class Module in Tailwind

    In this lesson, we learn how to control what utility classes are generated for each utility class mo ...

  6. a标签伪类link，hover，active，visited，focus区别

    <div id="content"> <h3><a class="a1" href="#">a标签伪类l ...

  7. IE6不兼容hover已解决

    新建一个csshover.htc文件,一下是csshover.htc内容 <public:attach event="ondocumentready" onevent=&qu ...

  8. Qt控件样式 Style Sheet Demo

    迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使 ...

  9. Simple Style

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

随机推荐

  1. NEU操作系统实验课4——线程同步

    实验要求: 创建两个线程按数字顺序打印10以下自然数,其中一个线程打印1-3及8-10:另一个线程打印4-6.要求使用线程同步机制实现上述打印顺序. 看网上的资料学习了两种写法 C++11的,使用了s ...

  2. BPM使用ligerUI实现主从表显示

    先看一下效果图: 界面有待美化,嘿嘿,下面说一下实现过程,当然,我的代码可能不对,就比如后台给前端返回JSON对象,应该包括状态和消息和数据,我这里直接给返回了JSON对象,所以,如果有大神,您知道怎 ...

  3. Ubuntu16.04下将hadoop2.7.3源代码导入到eclipse neon中

    0.为什么会有这篇: 这篇文章的目的在于帮助想学习hadoop源码的内容,却在导入的过程中出现了各种问题的人. 或许你一定找了很多博客都无果,那么不用担心,我和你一样,这也是这篇文章存在的意义,废话少 ...

  4. jumpserver install

    本文来源jumpserver官网 一步一步安装 环境 系统: CentOS 7 IP: 192.168.244.144 关闭 selinux 和防火墙 # CentOS 7 $ setenforce ...

  5. java 简单工厂模式实现

    简单工厂模式:也可以叫做静态工厂方法,属于类创建型模式,根据不同的参数,返回不同的类实现. 主要包含了三个角色: A.抽象产品角色 一般用接口 或是 抽象类实现 B.具体的产品角色,具体的类的实现 C ...

  6. Absolute Horizontal And Vertical Centering In CSS

    Quick CSS Trick: How To Center an Object Exactly In The Center Centering in CSS: A Complete Guide Ab ...

  7. oc的属性

    Declared property A declared property provides a syntactical shorthand for declaring a class’s acces ...

  8. 【领略RxSwift源码】- 变换操作（Operators）

    在上一篇中,我们分析了在RxSwift中的整个订阅流程.在开讲变换操作之前,首先要弄清楚Sink的概念,不清楚的同学可以翻看上一篇的分析.简单的来说,在每一次订阅操作之前都会进行一次Sink对流的操作 ...

  9. ZBrush带你发掘脸部雕刻的秘诀（上）

    骨骼,是一门基础艺术,几百年来一直为伟大的艺术大师所研究,它曾经,也将一直是创作现实且可信角色的关键,提高骨骼知识更将大大提高雕刻技能. 当然,这对于现实角色很重要,对卡通和风格化的角色也同样重要,底 ...

  10. java操作Excel的poi基础语法

    创建一个简单的实列 package com.java.poi; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache ...