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. POJ1151 Atlantis 扫描线算法

    题目大意 给出几个矩形对角端点坐标,求这些矩形整体覆盖的面积. 扫描线算法 整个平面被每个矩形的水平边所在直线(以后简称“水平线”)分成了几个部分,而整体覆盖面积则为每相邻的两个水平线间夹的长度(以后 ...

  2. android 系统签名【转】

    本文转载自:http://blog.csdn.net/csh86277516/article/details/73549824 Android——编译release版签名系统 AndroidManif ...

  3. Uva 11021（概率）

    题意:有k只麻球,每只只能活一天,但临死之前可能产生新麻球,生出i个麻球的概率为pi,给定m,求m天后所有麻球都死亡的概率 输入格式 输入一行为测试数据的组数T,每组数据第一行为3个整数n,k,m;已 ...

  4. [POJ 3621] Sightseeing Cows

    [题目链接] http://poj.org/problem?id=3621 [算法] 01分数规划(最优比率环) [代码] #include <algorithm> #include &l ...

  5. leetcode 几道题目

    是周六晚上的几道题,晚上11点半,睡的早,起不来! 494. Target Sum 分析:看完这题,看到数据范围,长度20,枚举就是1<<20 = 1e6, 然后单次20,总共就是2e8, ...

  6. asp.net 字符串过滤

    /// <summary> /// 去除HTML标记 /// </summary> /// <param name="Htmlstring">包 ...

  7. BZOJ4518: [Sdoi2016]征途(dp+斜率优化)

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1875  Solved: 1045[Submit][Status][Discuss] Descript ...

  8. 在APP开发设计过程中：如何设计启动页面？

    心理学上有一个“7秒理论”,说的是,一个人对另一个人的印象,在初次见面的七秒内就会形成,最近更有研究表明,这个时间可能更短——不到1秒.所以初次见面所展示的形象真的很重要.同理,用户在使用APP时,每 ...

  9. GCC G++ Make CMake自我科普

    Linux下gcc g++ make cmake 联系和区别 C/C++程序从编写到可执行一般经历这几个阶段 编写源代码 编译器编译代码生成目标文件,如.o文件 链接器链接目标文件和其他目标文件/库文 ...

  10. 生成式模型：LDA

            原文链接:http://blog.sina.com.cn/s/blog_5033f3b40101flbj.html         文章图文并茂,我就不转载了!!! LSI-Laten ...