zoukankan      html  css  js  c++  java
  • [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 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>
  • 相关阅读:
    struct模块
    socketserver模块
    操作系统的基础知识和进程
    day28
    day27
    内心要强大
    《人生》
    下棋+《人生》
    悲哀+鸡眼
    脑壳疼
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8809875.html
Copyright © 2011-2022 走看看