干燥相同的顺风级

Question

在我的应用程序中，我有很多形式输入，它们经常使用与无休止的类相同的样式，使我的眼睛流血。“顺风”鼓励只重复这些类，但我觉得这违反了枯燥的原则，并使代码臃肿。我在寻找一种集中和重用Tailwind类的方法

示例

 <div class="">
      <div class="flex items-center">
        <p class="text-xl w-6 text-red-600"></p>
        <h1 class="ml-4 text-gray-400">Description</h1>
      </div>
      <textarea
        oninput=" this.style.height='', this.style.height = this.scrollHeight +'px'"
        formControlName="description"
          class="ml-8 mt-1 p-2.5 w-5/6 text-sm rounded-md !outline-none focus:shadow-sm focus:ring-1 focus:ring-pink-400"
      ></textarea>
    </div>

    <div>
      <div class="flex items-center">
        <p class="text-xl w-6 text-red-600"></p>
        <h1 class="ml-4 text-gray-400">Projects</h1>
      </div>
      <textarea
        oninput=" this.style.height = this.scrollHeight +'px'"
        formControlName="projects"
      class="ml-8 mt-1 p-2.5 w-5/6 text-sm rounded-md !outline-none focus:shadow-sm focus:ring-1 focus:ring-pink-400"
      ></textarea>
    </div>

Answer 1

是啊，我也经常遇到这个问题。理想情况下，您将使用基于组件的框架，这意味着您只需编写每个组件一次，并在整个项目中重用它，就像在react中的Textarea组件一样，但是对于html或php (如wordpress主题)来说，这并不是很好。

我通常使用这类项目的方式是，一旦我找到了一组我经常重复的类，我就使用@apply或者仅仅是main.css文件中包含顺风导入的常规css将它们抽象到自己的类中，例如，我通常只为屏幕读取器创建一个类，用于样式化以及按钮和输入：

// main css file
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

    // regular css because tailwind doesn't support clip & clip-path
    .sr-only {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    // @apply tailwind classes to keep things consistent where possible
    .textarea {
        @apply ml-8 mt-1 p-2.5 w-5/6 text-sm rounded-md !outline-none focus:shadow-sm focus:ring-1 focus:ring-pink-400;
    }
}

// html
<textarea class="textarea"></textarea>

我倾向于做的一件事是强迫自己只抽象这些类，当我注意到一些东西变得烦人时不断地输入或更改，所以如果它只是一个简单的部分，有些卡片我通常不会费心，但是如果它是一个组件，你在整个网站的每一个页面上使用，然后我把它变成一个抽象的类。我这么做的原因，以及我对Tailwind推荐方法的理解，是为了避免陷入命名事物的问题，并且拥有大量的类，使得随着项目变得更大，更改样式变得更加困难，此时您还可以使用常规的css/scss。在我看来，顺风把可弯曲性放在可重用性之前，这确实需要一些习惯。

关于这个主题，在顺风文档https://tailwindcss.com/docs/reusing-styles中有一个很好的页面，它讨论了理想的选项，这取决于您有什么可用的。我个人认为，顺风在使用诸如React或Vue之类的东西时确实会闪闪发光，但它肯定也会给大多数其他项目带来价值和灵活性。