Tailwind CSS on GitHub

扩展组件

把项目重复的内容变得可维护.

Tailwind鼓励工具类优先的工作流,在这种工作流中,设计最初只使用工具类来实现,以避免过早的抽象。

Man looking at item at a store
Case study
Finding customers for your new business

Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

但随着项目的发展,你会发现自己在许多不同的地方重复使用常见的工具类组合来重新创建相同的组件。这在小组件上表现得最为明显,如按钮、表单元素、徽章等。

<!-- Repeating these classes for every button can be painful -->
<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
  Click me
</button>

在许多组件实例之间保持一长串的工具类同步会很快成为真正的维护噩梦,所以当开始遇到这样痛苦的重复时,提取一个组件是一个好主意。


提取模板组件

定义UI组件所需的所有信息都完全存在于CSS中是非常罕见的——几乎总是有一些重要的相应的HTML结构需要使用。

不要依赖CSS类来提取复杂的组件

Beach
Private Villa
$299 USD per night
<style>
  .vacation-card { /* ... */ }
  .vacation-card-info { /* ... */ }
  .vacation-card-eyebrow { /* ... */ }
  .vacation-card-title { /* ... */ }
  .vacation-card-price { /* ... */ }
</style>

<!-- Even with custom CSS, you still need to duplicate this HTML structure -->
<div class="vacation-card">
  <img class="vacation-card-image" src="..." alt="Beach in Cancun">
  <div class="vacation-card-info">
    <div>
      <div class="vacation-card-eyebrow">Private Villa</div>
      <div class="vacation-card-title">
        <a href="/vacations/cancun">Relaxing All-Inclusive Resort in Cancun</a>
      </div>
      <div class="vacation-card-price">$299 USD per night</div>
    </div>
  </div>
</div>

出于这个原因,通常最好将UI的可重用部分提取到template分块JavaScript组件中,而不是编写自定义CSS类。

通过组件引入,不需要在多个地方复制相同的类,从而产生任何维护负担。

创建一个组件

<!-- In use -->
<VacationCard
  img="/img/cancun.jpg"
  imgAlt="Beach in Cancun"
  eyebrow="Private Villa"
  title="Relaxing All-Inclusive Resort in Cancun"
  pricing="$299 USD per night"
  url="/vacations/cancun"
/>

<!-- ./components/VacationCard.vue -->
<template>
  <div>
    <img class="rounded" :src="img" :alt="imgAlt">
    <div class="mt-2">
      <div>
        <div class="text-xs text-gray-600 uppercase font-bold">{{ eyebrow }}</div>
        <div class="font-bold text-gray-700 leading-snug">
          <a :href="url" class="hover:underline">{{ title }}</a>
        </div>
        <div class="mt-2 text-sm text-gray-600">{{ pricing }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['img', 'imgAlt', 'eyebrow', 'title', 'pricing', 'url']
  }
</script>

上面的例子使用了Vue,同样的方法也可以用在React components, ERB partials, Blade components, Twig includes等上面。


使用@apply提取组件类

对于像按钮和表单元素这样的小组件,与简单的CSS类相比,创建一个组件可能显得过于繁重。

在这些情况下,你可以使用Tailwind的@apply指令来轻松地将通用工具类提取到CSS类中。

下面是使用@apply从现有的工具类中组合btn-indigo类的样子:

<button class="btn-indigo">
  Click me
</button>

<style>
  .btn-indigo {
    @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
  }
</style>

为了保证一致性,我们建议用@layer components{…}指令告诉Tailwind这些样式属于哪个图层:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

Tailwind会自动将这些样式移动到与@tailwind components相同的位置,这样你就不用担心源文件中的顺序了。

Using the @layer directive will also instruct Tailwind to consider those styles for purging when purging the components layer. Read our documentation on optimizing for production for more details.

使用@layer指令也会指示Tailwind在清除components图层时考虑这些样式。更多详情请阅读我们的优化生产环境

编写组件插件

除了在你的CSS文件中直接编写组件类,你还可以通过编写你自己的插件将组件类添加到Tailwind:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents, theme }) {
      const buttons = {
        '.btn': {
          padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
          borderRadius: theme('borderRadius.md'),
          fontWeight: theme('fontWeight.600'),
        },
        '.btn-indigo': {
          backgroundColor: theme('colors.indigo.500'),
          color: theme('colors.white'),
          '&:hover': {
            backgroundColor: theme('colors.indigo.600')
          },
        },
      }

      addComponents(buttons)
    })
  ]
}

如果你想要将Tailwind组件作为一个库发布,或者让跨多个项目共享组件变得更容易,那么这是一个很好的选择。

更多内容,查看组件插件