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. 怎样在Android.mk上加宏定义【转】

    本文转载自:http://blog.csdn.net/ttxgz/article/details/7591282 很简单, LOCAL_CFLAGS += -DWHATEVERDEFINE 就可以了

  2. bzoj3224: Tyvj 1728 普通平衡树(splay)

    3224: Tyvj 1728 普通平衡树 题目:传送门 题解: 啦啦啦啦又来敲个模版水经验啦~ 代码: #include<cstdio> #include<cstring> ...

  3. php auto_load mvc 接口框架(原创)

    autoload.php <?php function framework_autoload($className){ $className=str_replace('\\','/',$clas ...

  4. 使用C语言扩展Python3

    使用C语言扩展Python3.在Python3中正确调用C函数. 1. 文件demo.c #include <Python.h> // c function static PyObject ...

  5. [Offer收割]编程练习赛40

    不到一个小时AK,虽然是VP的,舒服,第一次.都简单的一比,没什么可说的. 查找三阶幻方 #pragma comment(linker, "/STACK:102400000,10240000 ...

  6. [Offer收割]编程练习赛39

    公平分队 #pragma comment(linker, "/STACK:102400000,102400000") #include<stdio.h> #includ ...

  7. 第一课 导入库 - 创建数据集 - CSV读取 - 导出 - 查找最大值 - 绘制数据

    第1课 创建数据 - 我们从创建自己的数据集开始分析.这可以防止阅读本教程的最终用户为得到下面的结果而不得不下载许多文件.我们将把这个数据集导出到一个文本文件中,这样您就可以获得从文本文件中一些拉取数 ...

  8. Android 通用Dialog中设置RecyclerView

    通用Dialog public class IOSRecyclerViewDialog{ private Context context; private Dialog dialog; private ...

  9. 当接口上配了 FeignClient 和 RequestMapping 两个注解,结果错误提示 重复mapping处理方法

    再接手老文档的时候,发现有这么一个问题 错误显示为: 原文档写法: 解决方法: 这是一个编译时写法的问题,将上方的RequestMapping去掉,然后把路径放在下面的PostMapping 便可以正 ...

  10. PLSQL 11注册码

    plsql 11 注册码:Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca