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. SQL SEVER 元年是1900年

    用SQL语句求 本月第一天,怎么写? 可以这样写: SELECT DATEADD(mm,DATEDIFF(mm,0,GETDATE()),0); 按照日期函数DATEDIFF的定义,第二个参数是开始日 ...

  2. global cache cr request

    当一个进程访问需要一个或者多个块时,它会首先检查自己的CACHE是否存在该块,如果发现没有,就会先通过global cache赋予这些块 共享访问的权限,然后再访问.假如,通过global cache ...

  3. Python中的traceback模块

    traceback模块被用来跟踪异常返回信息. 如下例所示: 1.直接打印异常信息 import traceback try: raise SyntaxError, "traceback t ...

  4. 自定义数据类型 C++ 结构体类型 共同体类型 枚举类型 类类型{}

    一.结构体类型 结构体类型,共用体类型,枚举类型,类类型等统称为自定义类型(user-defined-type,UDT). 结构体相当于其他高级语言中的记录(record);例如: struct St ...

  5. BZOJ-3732 Network 图论 最小生成树 倍增

    题面 题意:给你N个点,M条边的无向图 (N<=15000,M<=30000)第j条边的长度为 dj (1<=dj<=1e9),然后K个询问 (1<=K<=2000 ...

  6. 一步步教会你微信小程序的登录鉴权

    前言 为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口.乍一看文档,感觉文档上讲的非常有道理,但是实现起来又真的是摸不着头脑,不知道如何管理和维护登录态.本文就来手把手 ...

  7. 异步lambda表达式

  8. datetime is null

    本文转载自阿单<datetime is null>   datetime 以'YYYY-MM-DD HH:MM:SS'格式检索和显示DATETIME值同时当datetime 为 null时 ...

  9. 学习SQL笔记

    SQL 语句 语法 AND / OR SELECT column_name(s)FROM table_nameWHERE conditionAND|OR condition ALTER TABLE A ...

  10. Python中生成器,迭代器,以及一些常用的内置函数.

    知识点总结 生成器 生成器的本质就是迭代器. 迭代器:Python中提供的已经写好的工具或者通过数据转化得来的. 生成器:需要我们自己用Python代码构建的 创建生成器的三种方法: 通过生成器函数 ...