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. How do you install Google Chrome on Ubuntu?

    https://askubuntu.com/questions/510056/how-to-install-google-chrome sudo apt-get install chromium-br ...

  2. Bone Collector（hdoj--2602--01背包）

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  3. nginx 集群简述

    1.负载均衡介绍: 负载均衡是由多台服务器以对称的方式组成一个服务器集合,每台服务器都具有等价的地位,都可以单独对外提供服务而无须其他服务器的辅助.其工作模式为将外部发送来的请求均匀分配到对称结构中的 ...

  4. 如何在Linux下添加自己的驱动

    在此Linux驱动开发采用网络的方式,介绍两种驱动开发的方法:一.驱动编译到内核 1.先选择一个放置驱动代码的位置,例:drivers/char/xxx.c 2.在drivers/char/Kconf ...

  5. [hihocoder][Offer收割]编程练习赛44

    扫雷游戏 #pragma comment(linker, "/STACK:102400000,102400000") #include<stdio.h> #includ ...

  6. SQL Server-语句类别、数据库范式、系统数据库组成

      前言 终于等到这一天,我要开始重新系统学习数据库了,关于数据库这块,不出意外的话,每天会定时更新一篇且内容不会包含太多,简短的内容,深入的理解,Always to review the basic ...

  7. 5 Python+Selenium的元素定位方法（xpath）

    [环境] Python3.6+selenium3.0.2+FireFox50+win7 [定位方法] 1.方法:find_element_by_xpath('') 说明:xpath定位方法有相对路径和 ...

  8. HTML5中新增加Input 的种类

    查询文本框 <input type="search"> 数字文本框 any 代表不设置 <input type="number" max=&q ...

  9. 行间事件传this的问题：

    在做1个简单功能的时候,行间事件这块发现了1个问题: <!doctype html> <html> <head> <meta charset="ut ...

  10. python tips:文件读取——换行符的问题

    问题:在windows系统中,换行的符号是'\r\n'.python在读文件的时候为了系统兼容,会默认把'\r','n','\r\n'都视作换行.但是在windows文件中,可能在同一行中同时存在'\ ...