🔥 使用Tailwind CSS插件实现px自动转vw/vh

前言

在使用Tailwind CSS做大屏响应式的时候没办法针对单个属性做px转vh或者vw，对此写了一个Tailwind CSS来自动将px转vh、vw。

使用方法

通过npm安装

npm install tailwindcss-px-to-viewport --save-dev

tailwind.config.js配置

// tailwind.config.js
import pxToViewport from 'tailwindcss-px-to-viewport'

export default {
  theme: {
    extend: {
      pxToViewPort: {
        // 基准视口配置
        PresetScreen: {
          width: 1920, // 默认设计稿宽度（单位：px）
          height: 1080, // 默认设计稿高度（单位：px）
        },
        // 自定义扩展规则（可选）
        utilities: {
          // 在此添加自定义转换规则
        }
      },
    },
  },
  plugins: [
    pxToViewport() // 启用插件
  ],
}

语法

如果要将width的px转vw，使用pw-w-[100]，如果要将height的px转vh,使用ph-h-[100]。

🌟 结语

通过tailwindcss-px-to-viewport，我们可以快速的将px转vw或者vh。 详细说明文档可以访问下面的GitHub仓库：
👉 GitHub仓库
✨ 如果觉得好用，可以给点个Star。😊