干涸相同的顺风等级

Question

在我的应用程序中，我有很多表单输入，它们经常使用相同的样式和无穷无尽的类，让我的眼睛流血。 Tailwind 鼓励只重复这些课程，但我觉得这违反了枯燥的原则并且使代码膨胀。 我正在寻找一种方法来集中和重用 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（例如 Z1870A829D9BC641ABFZ5002 主题）效果不佳。

The way I usally go about working with these sort of projects is once I find one set of classes that I frequently resuse, I abstract them into there own class using @apply or just regular ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ in your main.ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ file that includes the tailwind imports ，例如，我通常为仅屏幕阅读器样式以及按钮和输入创建 class：

// 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>

我倾向于做的一件事是强迫自己只抽象这些类，一旦我注意到输入或不断变化的东西变得烦人，所以如果它只是一个带有一些卡片的简单部分，我通常不会打扰，但如果它是你使用的组件在网站的每个页面上，然后我将其转换为抽象的 class。 我这样做的原因以及我对 Tailwind 推荐方式的理解是为了避免回到命名事物和拥有大量类的问题，这使得随着项目变大而改变样式变得更加困难，此时您不妨使用常规css/scss。 在我看来，顺风将灵活性置于可重用性之前，这确实需要一些时间来适应。

顺风文档https://tailwindcss.com/docs/reusing-styles中有一个关于此主题的好页面，其中讨论了理想的选项，具体取决于您可用的内容。 我个人认为 Tailwind 在与 React 或 Vue 等工具一起使用时确实会大放异彩，但它绝对仍然为大多数其他项目带来价值和灵活性。