the-lemonboy / tailwindcss-px-to-viewport Public

Notifications You must be signed in to change notification settings
Fork 1
Star 7

Tailwind CSS plugin that automatically converts px unit properties to viewport units vw or vh.

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
playground		playground
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tailwind.config.js		tailwind.config.js

Repository files navigation

tailwindcss-px-to-viewport

tailwindcss-px-to-viewport 可以通过 Tailwind CSS 的写法将 px 单位的属性转换为 vw 或 vh。

安装

使用 npm 安装：

npm install tailwindcss-px-to-viewport

使用示例在你的 Tailwind CSS 配置文件中添加以下内容:

import pxToViewport from 'tailwindcss-px-to-viewport'

module.exports = {
  theme: {
    extend: {
      pxToViewPort: {
        PresetScreen: {
          width: 1920,
          height: 1080,
        },
      },
    },
  },
  plugins: [pxToViewport],
}