当你应该在顺风（和SCSS）中使用@apply时

Question

我读到您应该尽可能避免将 @apply 与 tailwind 一起使用。但这种方法似乎不仅会让你的 html 难以忍受，还会使你的 CSS 文件变得臃肿。我想对此进行讨论，因为似乎顺风和 SCSS 的合理组合将为您节省大量 CSS 文件大小。

Answer 1

假设我有一个带有悬停滑动动画的精美按钮。它需要对伪元素以及内部子元素进行大量样式设置。因此，仅使用顺风实用程序类将是地狱

<button class="
    py-3 
    px-6
    inline-block
    relative
    no-underline
    overflow-hidden
    cursor-pointer
    z-0
    select-none
    rounded-none
    before:block
    before:absolute
    before:w-full
    before:content-['']
    before:inset-y-0
    before:right-0
    before:z-1
    before:translate-x-neg-full
    after:block
    after:absolute
    after:w-full
    after:content-['']
    after:inset-y-0
    after:right-0
    after:z-0
    after:translate-x-pos-full
    after:transition-transform
    after:duration-350
    after:delay-0
    after:ease-in-out
    hover:before:translate-x-0
    hover:before:transition-transform
    hover:before:duration-350
    hover:before:ease-in-out
    hover:after:opacity-100
    hover:after:translate-x-0
    hover:after:transition-transform
    hover:after:duration-350
    hover:after:delay-360
    hover:after:ease-in-out">
        <span class="relative z-5 transition-colors duration-350 ease-in-out">test</span>
</button>

是的，HTML 很混乱，但还有一个更大的问题：这将创建大约 40 个类，其中一半以上不会在网站的任何地方使用。但还有更多：用 PHP 控制这么大的范围是相当困难的。我的意思是添加类并修改它们非常困难，例如如果我想添加一个变体，我必须向我的组件添加一个带有变体类的 PHP 数组。如果有多种类型的变化（例如颜色和大小），我将必须添加几个数组并正确合并它们。

<?php
$buttonSizeVariations = [
    'default' => 'py-3 px-6',
    'small' => 'py-1 px-2',
];
$buttonColorVariations = [
    'default' => 'bg-black text-white hover:text-black before:bg-white after:bg-white',
    'inverted' => 'bg-white text-black hover:text-white before:bg-black after:bg-black'
];

但这还不是结束。如果我想将这些样式应用到不是按钮的其他元素（假设我希望复选框看起来像按钮），我必须将所有这些类复制到我的复选框标签，如果我想更改按钮默认填充，请上帝帮助我。我必须在我的网站中搜索此类序列的所有出现，并手动更改整个网站的实用程序。即使这还不是我斗争的结束：如果我想将样式应用到我无法控制的元素（例如 JS 日历中的按钮），我将不得不使用 apply 所有这些类或创建一个实用程序 .btn 和应用它。但在这种情况下，它将在 css 选择器内生成所有这些属性，从而复制大约 40 个实用程序的样式。

.calendar .button {
     @apply .btn;
}

所以我决定使用 scss @extend + tailwind @apply 的组合

.btn-hover {
    &::before {
        @apply translate-x-0 transition-transform duration-350 ease-in-out;
    }

    &:after {
        @apply opacity-100 translate-x-0 transition-transform duration-350 delay-360 ease-in-out;
    }
}
.btn-default {
    @apply py-3 px-6;
}

.btn-generic-no-hover {
    @extend .btn-default;
    @apply inline-block relative no-underline overflow-hidden cursor-pointer z-0 select-none rounded-none;
}
.btn-generic {
    @extend .btn-generic-no-hover;

    &::after, &::before{
        @apply block absolute w-full content-[''] inset-y-0 right-0 z-negative;
    }

    &::before {
        @apply z-1 translate-x-neg-full;
    }

    &::after {
        @apply z-0 translate-x-pos-full transition-transform duration-350 delay-0 ease-in-out;
    }

    &:hover {
        @extend .btn-hover;
    }

    & > span {
        @apply relative z-5 transition-colors duration-350 ease-in-out;
    }
}

这是真正可重用的解决方案，我可以@扩展网站任何元素的按钮的任何部分，而无需在 HTML 中复制所有实用程序或在 CSS 中复制所有属性。所以我认为最好的方法是当你的类变得太大、难以控制或者当你需要在其他元素上重用这些样式时使用 SCSS 和 @extend。我真的不明白为什么要添加任何 Tailwind 静态实用程序，如果每次您想使用它们来设置其他元素的样式时，它们只会一遍又一遍地重复样式。