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. 36岁IT老人再次随笔——程序员的门槛其实并不高，但却是一个易学难精的行当——IT的快车很快，我常看到不少人摔落下去，但又有不少身手敏捷的人跳了上来 good

    36岁的我,还在IT里面留恋着技术.我不是什么技术牛人,只是不愿离开.搞硬件的朋友对我说:“我以为你是搞硬件的,没想到你软件方面这么厉害?”,搞软件的朋友对我说:“我以为你只是搞软件的,没想到你硬件方 ...

  2. HDU 1257（最小拦截系统）

    Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不 能超过前一发的高度.某天,雷达 ...

  3. poj1700--贪心--Crossing River

    Crossing River Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12260   Accepted: 4641 D ...

  4. 一个 passive 引发的bug

    不是什么很难的东西,权且做个记录. 首先说下背景,目前的项目中,需要同时绑定 wheel 和 scroll 事件. 绑定 wheel,目的是开发 ctrl + wheel 缩放页面功能,此功能与浏览器 ...

  5. cloudfoundry service broker 制作

    实验室这边需要制作service broker.从今天开始将精力投入其中.

  6. 初探.net framework 下的异步多线程

    初探.net framework 下的异步多线程 目录 1.多线程的出现条件 2.Thread和ThreadPool的相关Api及用法 3.Task和Parallel的相关Api及用法 4.Async ...

  7. 第八课： - 从Microsoft SQL数据库读取

    第 8 课 如何从Microsoft SQL数据库中提取数据 In [1]: # Import libraries import pandas as pd import sys from sqlalc ...

  8. 更改 AVD 默认存放位置

    AVD Manager 创建的 Android 模拟器(AVD)默认存放位置为C:\Users\<user>\.android\avd,我创建了2个AVD,一共用了近9G!是要挪挪地方了. ...

  9. 详解sqlserver查询表索引

    SELECT   索引名称=a.name ,表名=c.name ,索引字段名=d.name ,索引字段位置=d.colid ? 1 2 3 4 5 6 7 8 FROM  sysindexes  a ...

  10. 开发一个 App 有多难？说出来你可能不信！

    上图为程序员客栈儿童类视频APP 1.开发一个APP有多难?说实话,单纯地从开发来说,开发一个APP没有那么难.如果一款APP的基本功能点确定了,开发时间一般为1-2个月就完成了,费用大约5-10万的 ...