给 tailwind css 添加自定义工具类

如何给 Tailwind CSS 添加自定义原子类

Tailwind CSS 是一个高度可配置的 CSS 框架，它通过提供原子类（utility classes）来简化样式的应用。然而，有时内置的原子类并不能完全满足需求，这时我们需要添加自定义原子类。本文将介绍如何通过编写插件来向 Tailwind CSS 添加自定义原子类。

一、安装 Tailwind CSS

在开始之前，确保你已经安装了 Tailwind CSS。如果你还没有安装，可以使用以下命令进行安装：

npm install tailwindcss

然后，创建一个 tailwind.config.js 文件：

npx tailwindcss init

二、配置 Tailwind CSS 插件

Tailwind CSS 提供了一种简单的方法来创建自定义插件。首先，我们需要在 tailwind.config.js 文件中定义插件。以下是一个示例插件的结构：

const plugin = require('tailwindcss/plugin');

const customUtilities = plugin(function({ addUtilities }) {
  const newUtilities = {
    '.rotate-45': {
      transform: 'rotate(45deg)',
    },
    '.rotate-90': {
      transform: 'rotate(90deg)',
    },
  };
  addUtilities(newUtilities);
});

module.exports = {
  plugins: [
    customUtilities,
  ],
};

三、添加自定义原子类

现在，我们将通过编写一个更复杂的插件，向 Tailwind CSS 添加自定义原子类。假设我们需要一些新的布局类，比如 flex-row 和 flex-col，以及一个自动填充网格布局 grid-auto-fit。

定义自定义插件

首先，在 tailwind.config.js 文件中定义我们的自定义插件：

const plugin = require('tailwindcss/plugin');

const customLayoutUtilities = plugin(function ({ matchUtilities, theme }) {
  matchUtilities(
    {
      'flex-row': (value) => ({
        display: 'flex',
        flexDirection: 'row',
        ...value,
      }),
    },
    {
      values: theme('flexRow'),
    }
  );

  matchUtilities(
    {
      'flex-col': (value) => ({
        display: 'flex',
        flexDirection: 'column',
        ...value,
      }),
    },
    {
      values: theme('flexCol'),
    }
  );

  matchUtilities(
    {
      'grid-auto-fit': (value) => ({
        display: 'grid',
        gridTemplateColumns: `repeat(auto-fit, minmax(${value}, 1fr))`,
      }),
    },
    {
      values: theme('gridAutoFit'),
    }
  );
});

module.exports = {
  theme: {
    extend: {
      flexRow: {
        start: {
          'align-items': 'center',
          'justify-content': 'flex-start',
        },
        end: {
          'align-items': 'center',
          'justify-content': 'flex-end',
        },
        center: {
          'align-items': 'center',
          'justify-content': 'center',
        },
        between: {
          'align-items': 'center',
          'justify-content': 'space-between',
        },
        around: {
          'align-items': 'center',
          'justify-content': 'space-around',
        },
        evenly: {
          'align-items': 'center',
          'justify-content': 'space-evenly',
        },
      },
      flexCol: {
        start: {
          'align-items': 'flex-start',
          'justify-content': 'center',
        },
        end: {
          'align-items': 'flex-end',
          'justify-content': 'center',
        },
        center: {
          'align-items': 'center',
          'justify-content': 'center',
        },
        baseline: {
          'align-items': 'baseline',
          'justify-content': 'center',
        },
        stretch: {
          'align-items': 'stretch',
          'justify-content': 'center',
        },
      },
      gridAutoFit: {
        DEFAULT: '16rem',
        xs: '12rem',
        sm: '14rem',
        md: '16rem',
        lg: '18rem',
        xl: '20rem',
      },
    },
  },
  plugins: [
    customLayoutUtilities,
  ],
};

应用自定义插件

通过上述配置，我们创建了一个插件 customLayoutUtilities，它定义了新的原子类 flex-row、flex-col 和 grid-auto-fit。这些类现在可以在你的项目中使用。例如：

<div class="flex-row start">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex-col center">
  <div>Item A</div>
  <div>Item B</div>
</div>

<div class="grid-auto-fit md">
  <div>Grid Item 1</div>
  <div>Grid Item 2</div>
</div>

四、总结

通过自定义插件，Tailwind CSS 的可扩展性得到了极大的增强。你可以根据项目需求添加各种自定义原子类，从而提高开发效率，保持代码的一致性和可维护性。希望本文能帮助你更好地理解如何为 Tailwind CSS 添加自定义原子类，并在你的项目中充分利用这一强大的功能。

Flex Utilities

Custom class	TW classes
`flex-row-start`	flex items-center justify-start
`flex-row-end`	flex items-center justify-end
`flex-row-center`	flex items-center justify-center
`flex-row-evenly`	flex items-center justify-evenly
`flex-row-around`	flex items-center justify-around
`flex-row-between`	flex items-center justify-between
`flex-col-start`	flex flex-col justify-center items-start
`flex-col-end`	flex flex-col justify-center items-end
`flex-col-center`	flex flex-col justify-center items-center
`flex-col-baseline`	flex flex-col justify-center items-baseline
`flex-col-stretch`	flex flex-col justify-center items-stretch

usage

  <div class="flex-row-center gap-x-6">
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
</div>

Grid Utilities

Inspired by ThirusOfficial

Create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-fit keyword in the grid-template-columns CSS property to help you do the same.

Usage

Use utilities like .grid-auto-fit-sm, .grid-auto-fit-xl to change the minimum and maximum item size of the responsive grid. This plugin includes five item sizes with the default minimum size being 16rem.

<section class="grid gap-4 grid-auto-fit">
  <div class="p-4 bg-black">Item 1</div>
  <div class="p-4 bg-black">Item 2</div>
  <div class="p-4 bg-black">Item 3</div>
  <div class="p-4 bg-black">Item 4</div>
  <div class="p-4 bg-black">Item 5</div>
  <div class="p-4 bg-black">Item 6</div>
  <div class="p-4 bg-black">Item 7</div>
</section>

Changing the grid item size

Class	Minimum item width
`grid-auto-fit-xs`	`12rem`
`grid-auto-fit-sm`	`14rem`
`grid-auto-fit` or `grid-auto-fit-md`	`16rem`
`grid-auto-fit-lg`	`18rem`
`grid-auto-fit-xl`	`20rem`
`grid-auto-fit-[13rem]`	`13rem`

This plugin supports the use of arbitrary values if you want a custom minimum item size