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. find命令用法举例

    显示7天前(后)的时间 for linux “find”的用法: 删除”/tmp”目录下,7天前的文件 find /tmp -name "*" -type f-mtime +7 - ...

  2. 错误： su: 无法设置组: 不允许的操作

    到 /bin目录下,用ls -l 看下su文件的权限是不是rwxr-xr-x或者-rwxrwxrwx 执行这条命令chmod ug+s su

  3. 轻快的vim（四）：修改

    我想每个Coder都深刻的明白,修改这一操作在代码的世界里是多么重要 与其说修改,无非就是删除了再插入,但VIM把这两者结合的很有效率 闲话少说,让我们再次使用这轻快的VIM在code上起舞 字符替换 ...

  4. hdu 1085(普通母函数）

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  5. os.clock()导致的bug

    os.clock () 功能:返回一个程序使用CPU时间的一个近似值 最近做了一个功能,这个功能需要统计时间间隔,例如每隔0.5秒做一次调用. 我用了os.clock()去统计时间,结果在pc机上都没 ...

  6. html5左右滑动页面效果实现

    The Demo of h5 slider achiev by Myself 主要思路: 设置一个容器container,然后里面有几个page,获取到屏幕的宽度并将其赋值给page,然后contai ...

  7. ML:流形学习

    很多原理性的东西需要有基础性的理解,还是篇幅过少,所以讲解的不是特别的清晰. 原文链接:http://blog.sciencenet.cn/blog-722391-583413.html 流形(man ...

  8. getopt函数

    getopt -- 解析命令的可选项   [说明]getopt只是一个简单的解析命令可选项的函数,只能进行简单的格式命令解析,格式如下:   1.形如:cmd [-a][-b] //对短选项的解析: ...

  9. Lazy Stored Properties--无括号时为匿名函数

    第一次使用的时候进行计算和初始化,后面的引用不在进行计算. A lazy stored property is a property whose initial value is not calcul ...

  10. UNIX网络编程（转载）

    1.1 客户端程序和服务端程序 网络程序和普通的程序有一个最大的区别是网络程序是由两个部分组成的--客户端和服务器端. 网络程序是先有服务器程序启动,等待客户端的程序运行并建立连接.一般的来说是服务端 ...