如何自定义Tailwind 2.x响应式宽高比插件实现响应式类？

问题描述 #

我基于现有代码创建了一个Tailwind工具插件，需要对其进行自定义以实现响应式效果，最终要支持如下格式的工具类：

class="aspect-3/4 md:aspect-4/3"

解决方案 #

1. 在插件中启用响应式变体 #

修改你的插件代码，在addUtilities方法的第二个参数中指定variants: ['responsive']，Tailwind会自动为自定义工具类生成带断点前缀的版本。示例代码如下：

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss/plugin')(function({ addUtilities }) {
      // 定义自定义宽高比工具类
      const aspectRatioUtilities = {
        '.aspect-1/1': { aspectRatio: '1/1' },
        '.aspect-3/4': { aspectRatio: '3/4' },
        '.aspect-4/3': { aspectRatio: '4/3' },
        '.aspect-16/9': { aspectRatio: '16/9' },
        // 可添加更多自定义宽高比规则
      };

      // 启用响应式变体，生成带断点前缀的工具类
      addUtilities(aspectRatioUtilities, {
        variants: ['responsive']
      });
    })
  ]
};

2. 确认响应式断点配置 #

Tailwind默认内置了sm、md、lg、xl等常用断点，若需自定义断点，可在theme.screens中调整：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      // 按需添加自定义断点
    },
  },
  // ...其他配置项
};

3. 使用响应式工具类 #

配置完成后，直接在HTML中使用带断点前缀的宽高比类即可：

<div class="aspect-3/4 md:aspect-4/3">
  <!-- 元素内容 -->
</div>

这段代码会让元素在屏幕宽度小于768px时应用3/4宽高比，大于等于768px时切换为4/3宽高比。

内容的提问来源于stack exchange，提问作者Dali