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. win7 32位支持多大内存|win7 32位旗舰版最多能识别多少内存

    win7 32位支持多大内存|win7 32位旗舰版最多能识别多少内存 内存的大小决定系统运行速度,所以不少人认为只要内存加大就行了,其实这是不对的,因为win7 32位能支持的内存大小是有限制的,并 ...

  2. Arduino-IIC-Wire.h

    前言:Wire.h是Arduino的IIC库. 一.Wire库函数 Wire.begin() Wire.requestFrom() Wire.beginTransmission() Wire.endT ...

  3. P3808 【模版】AC自动机（简单版）

    题目背景 这是一道简单的AC自动机模版题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 题目描述 给定n个模式串和1个文本串,求有多少个模式串在文本 ...

  4. angular基础入门

    第一章 AngularJs入门 AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率. 1 特点 AngularJS与 ...

  5. Android AlertDialog 动态更新里面的ListView数据

    1:和ListView的数据跟新是基本一样的. 2:Activity代码示例 public class MainActivity extends AppCompatActivity { AlertDi ...

  6. SQL触发器 inset自学经验

    本人建立了一个特价汇网站,想要记录每个商品的点击量和整个网站的访问量,于是就想用sql 触发器来实现 drop trigger tgr_cg_records_update_column create ...

  7. DELPHI调试出现disconnected session的解决办法

    我在控制面板中,是禁用了UAC的,如下图 但是,在注册表中启用了UAC(EnableLUA), 工程中请求了管理员权限,如下图: 所以,整个权限请求混乱了. 解决办法,要么把注册表的LUA设置为0,要 ...

  8. python安装Django需要环境

    Django==1.10.3 -e git+https://github.com/duoshuo/duoshuo-python-sdk.git#egg=duoshuo-python-sdk djang ...

  9. Java中数组获取最大值

    最大值获取:从数组的所有元素中找出最大值. 实现思路: 定义变量,保存数组0索引上的元素 遍历数组,获取出数组中的每个元素 将遍历到的元素和保存数组0索引上值的变量进行比较 如果数组元素的值大于了变量 ...

  10. 采用requests库构建简单的网络爬虫

    Date: 2019-06-09 Author: Sun 我们分析格言网 https://www.geyanw.com/, 通过requests网络库和bs4解析库进行爬取此网站内容. ​ 项目操作步 ...