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. 0x54 树形DP

    树形DP我只知道千万别写森林转二叉树慢的要死 没有上司的舞会 水!裸! #include<cstdio> #include<cstring> #include<cstdl ...

  2. Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag. Is this really what you want?

    安卓出现如下错误,需要增加FLAG_ACTIVITY_NEW_TASK标志 Intent intent1 = new Intent(getApplicationContext(), CameraAct ...

  3. reportlab使用示例:文字和图片

    Python的reportlab专门将数据使用生成PDF中的图形和文档功能, 下载ReportLab https://pypi.python.org/simple/reportlab/ http:// ...

  4. linux 在线实验

    https://www.shiyanlou.com/courses/running/2

  5. mysql视图,索引和存储过程

    一:视图 视图又叫虚表.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并且在引用视图时动态生成. 具体 ...

  6. shp系列(四)——利用C++进行Shx文件的读(打开)

    1.shx文件的基本情况 shx文件又叫索引文件,主要包含坐标文件的索引信息,文件中每个记录包含对应的坐标文件记录距离坐标文件的初始位置的偏移量.通过索引文件可以很方便地在坐标文件中定位到指定目标的坐 ...

  7. 【转】PowerDesigner物理数据表生成C#实体类Model

    model实体类是什么: 在三层架构UI,BLL,DAL中,有时用户插入一条记录到数据库中,必然会有不少数据,按正常编程,也必然会一下子调用某个函数传入不少参数.为了减少参数的数量,达到高效简洁的效果 ...

  8. Java 系列之spring学习--依赖注入(二)

    一.依赖注入的三种方式 接口注入,set注入,构造函数注入 二.构造函数注入 2.1.测试类 package test; public class test01 { public String msg ...

  9. DB2大数据量优化查询解决方案

    利用DB2表分区的功能对大数据量的表进行分区,可以优化查询. 表分区介绍: 表分区是一种数据组织方案,它根据一列或多列中的值把表数据划分为多个称为数据分区 的存储对象. (我觉得表分区就类似于Wind ...

  10. myslide探索

    最近查一些国内学术牛人的报告时,注意到myslide是个很好的平台,比如山大一个老师的报告,完全可以在上面看到 https://myslide.cn/slides/10774 又比如交大一个大牛老师关 ...