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. android.mk中LOCAL_MODULE_TAGS说明【转】

    转自http://blog.csdn.net/evilcode/article/details/6459299 LOCAL_MODULE_TAGS :=user eng tests optional ...

  2. Intellij IDEA社区版打包Maven项目成war包，并部署到tomcat上

    转自:https://blog.csdn.net/yums467/article/details/51660683 需求分析 我们利用 Intellij idea社区版IDE开发了一个maven的sp ...

  3. 基于Websocket的火拼俄罗斯（基础）

    传统的HTTP请求是由浏览器发起,然后呢服务端接收到请求之后呢返回一个数据.那么这样一次来回之后呢请求就断了.但是WebSocket它不一样,它同样是由浏览器去发起一个请求但是这个请求是一个WebSo ...

  4. day63-webservice 08.在web项目中配置带有接口的webservice服务

    这个是配置带有接口的WebService的服务. http://localhost:8080/cxf-web-server/service 带有接口的实现类也给它做好了.jaxws:endpoint是 ...

  5. Hdu-6242 2017CCPC-哈尔滨站 M.Geometry Problem 计算几何 随机

    题面 题意:给你n个点,让你找到一个圆,输出圆心,和半径,使得有超过一半的点刚好在圆上.n<=1e5,题目保证了有解 题解:刚开始看着很不可做的样子,但是多想想,三点确定一个圆,三点啊! 现在有 ...

  6. Redis（三）、Redis主从复制

    一.主从复制 主从复制:主节点负责写数据,从节点负责读数据,从而实现读写分离,提高redis的高可用性. 让一个服务器去复制(replicate)另一个服务器,我们称呼被复制的服务器为主节点(mast ...

  7. NSKeyedUnarchiver归档

    把自定义的类对象编码到NSData中 NSData *data = [NSKeyedArchiver archivedDataWithRootObject:bc];//归档,bc是一个自定义的类对象, ...

  8. 云信 短信发送 demo

    package com.dataTaskListener; import org.apache.commons.httpclient.Header; import org.apache.commons ...

  9. MSSQL_20160719_在作业步骤中使用sp_send_dbmail遇到的问题

    需求: 在作业步骤中使用sp_send_dbmail发出邮件, 并将数据库中的日志表通过@query参数导出文本作为邮件附件 遇到错误: 服务器 DB-DWH-1,第 1 行  服务器主体 " ...

  10. SVN添加分支

    1.打开版本库浏览视图 2.复制当前版本 3.输入复制的目的目录即可