When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In this lesson, we see how this concern can be addressed by extracting a group of tailwind utility classes into a component classname. We create a Blocks Elements and Modifier (BEM) button component with a few style modifiers, that can be used everywhere in our project.

It is not reuseable when you only apply utilities class to the element.

The button way is:

<button class="button">Button</button>

So to create .button class and apply all the utilities class from tailwind, we can do:

.button {
@apply .font-bold .py-2 .px-4 .rounded;
}
.button-blue {
@apply .bg-blue .text-white;
}
.button-blue:hover {
@apply .bg-blue-dark;
}

Then we can use it like:

<button class="button button-blue">Button</button>

[Tailwind] Abstract Utility Classes to BEM Components in Tailwind的更多相关文章

  1. add a private constructor to hide the implicit public one(Utility classes should not have public constructors)

    sonarlint提示add a private constructor to hide the implicit public one Utility classes should not have ...

  2. [Tailwind] Create Custom Utility Classes in Tailwind

    In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties t ...

  3. Top 15 Java Utility Classes

    In Java, a utility class is a class that defines a set of methods that perform common functions. Thi ...

  4. Utility Classes Are Evil

    原文地址:http://alphawang.com/blog/2014/09/utility-classes-are-evil/ This post is a summary of this arti ...

  5. [Tailwind] Extending Tailwind with Responsive Custom Utility Classes

    You are able to extend the custom css with hover, focus, group-hover, responsive variants class in t ...

  6. [C++] OOP - Virtual Functions and Abstract Base Classes

    Ordinarily, if we do not use a function, we do not need to supply a definition of the function. Howe ...

  7. python 用abc模块构建抽象基类Abstract Base Classes

    见代码: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/08/01 16:58 from abc import ABCMet ...

  8. [Tailwind] Style Elements on hover and focus with Tailwind’s State Variants

    In this lesson, we learn how to target specific states of elements and apply styles only when those ...

  9. [Tailwind] Get started with Tailwindcss

    In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. ...

随机推荐

  1. Windows下Go语言LiteIDE下载及安装

    下载地址为 https://www.golangtc.com/download/liteide  我下载的是liteidex32.1windows-qt4.zip,下载之后解压,并将liteide文件 ...

  2. Swift - 将String类型的数字转换成数字类型(支持十进制、十六进制)

    1,十进制的字符串转成数字 Swift中,如果要把字符串转换成数字类型(比如整型,浮点型等).可以先转成NSString类型,让后再转. 1 2 3 4 //将文本框中的值转换成数字 var i = ...

  3. linux下nmap工具的使用

    NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工 具包,其基本功能有三个,一是探测一组主机是否在线:其次是扫描主机端口,嗅探所提供的网络服务:还可以推断主机所用的操作系统 ...

  4. 数据科学的完整学习路径(Python版)

    转载自:http://python.jobbole.com/80981/ 英文(原文)连接:https://www.analyticsvidhya.com/learning-paths-data-sc ...

  5. C#中的值类型、引用类型,代码告诉你他是什么类型。

    C#代码告诉你这是什么类型. using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  6. MSDN性能分析相关网站收集

    Visual Studio 性能分析初学者指南 | Microsoft Docshttps://docs.microsoft.com/zh-cn/visualstudio/profiling/begi ...

  7. WebForm--j简单控件、简单的登录(怎么链接数据库)

    一.简单控件 1.label:边框(边框的颜色.样式.粗细)  是专门显示文字的,   被编译后是    <span id="Label1">Label</spa ...

  8. 【转载】Java实现word转pdf

    最近遇到一个项目需要把word转成pdf,GOOGLE了一下网上的方案有很多,比如虚拟打印.给word装扩展插件等,这些方案都依赖于ms word程序,在java代码中也得使用诸如jacob或jcom ...

  9. linux+nginx+python+django环境配置

    Django是一个开放源代码的Web应用框架,由Python写成,它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的.python+django也是web开发者最受欢迎的框架.今天 ...

  10. WAMP安装之坑

    Apache安装目录不能有空格 Apache根目录修改后不能直接localhost打开,可以通过改变端口,然后输入 localhost:端口号 打开