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. 火狐Vimperator插件

    http://www.iplaysoft.com/vimium-and-vimperator.html http://wangbixi.com/x2923/comment-page-1/

  2. python spark 求解最大 最小 平均

    rdd = sc.parallelizeDoubles(testData); Now we’ll calculate the mean of our dataset.   1 LOGGER.info( ...

  3. js中的面向对象(一)封装

    1.简单的封装(定义) var cat1 = {}; cat1.name = '阿黄'; cat1.sex = '男'; cat1.age = 11; //cat2也同样具有三个属性 var cat2 ...

  4. 用fiddler不能抓取https及证书无法导出

    本次说的不是首次安装fiddler 1.不管有没有安装成功,先查看有没有安装过证书,有的话删除,重新进行安装 打开fiddler,找到Tools-HTTPS-Athons-Open windows C ...

  5. Mysql数据类型(一)

    介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考链接:http://www.runoob.com/mysql/mysql-data- ...

  6. C# WinForm的练习

    今天写了一个WinForm的练习,将源代码贴出来和大家一起学习学习. 首先:按照下图将一个button控件.三个RadioButton控件.三个CheckBox控件.一个Label控件和一个Track ...

  7. 1.Ventuz 介绍

    Ventoz能做什么? Ventuz是一款实时图文包装内容创作.制作和播出控制软件.Ventuz专注于高端视听内容的制作,包括交互展示和大型活动.视频墙.广播电视在线包装及演播室舞台及灯光控制等领域. ...

  8. 洛谷P2391 白雪皑皑(并查集)

    题目背景 “柴门闻犬吠,风雪夜归人”,冬天,不期而至.千里冰封,万里雪飘.空中刮起了鸭毛大雪.雪花纷纷,降落人间. 美能量星球(pty 在 spore 上的一个殖民地)上的人们被这美景所震撼.但是 p ...

  9. jQuery动画知识总结

    jQuery动画概述 我们之前实现的下拉菜单的案例,是没有动画效果的,但是在日常开发中,动画效果是经常会用到的,所以我们可以尝试使用jQuery动画,将下拉菜单案例实现的更动感一些. jQuery提供 ...

  10. 基于ACE的TAO开发---一个简单的入门实例-----VS2008(一)

    万事开头难,不管做什么事最开始总是最困难的,一旦上手了就好了. 这也是我自己学习corba编程的一点经验和心得.下面的例子主要是保证读者跟着走能立马看到效果. 1.机器上的TAO是实现已经装好的开发版 ...