tailwindcss-add-px

tailwindcss-add-px

---

tailwindcss 插件，主要是为特定的 utilclass 添加px。 支持的选项:

• minWidth、width、maxWidth
• minHeight、height、maxHeight
• padding、margin、borderWidth、borderRadius
• inset(left、right、top、bottom)
• fontSize、letterSpacing、lineHeight

    <div class="w-10px h-10px bg-red absolute top-50px left-50px">hello world</div>

安装

npm install tailwindcss-add-px

yarn add tailwindcss-add-px

将插件添加到 tailwind 配置文件

// tailwind.config.js
const tailwindcssPxPlugin = require('tailwindcss-add-px')
const classPxOptions = {
    width: [10],
    height: [10],
    inset: [50]
}
module.exports = {
    mode: 'jit', // 支持开发编译
    // ...
    plugins: [
        tailwindcssPxPlugin(classPxOptions)
    ]
}

插件参数

   plugins: [
        tailwindcssPxPlugin(params1, params2)
    ]

// params1: { themeName: themeValue }

themeName: string （ 支持的 utilclass 选项）
themeValue: [] | {
        pxArray: [], // 生成单个 px
        range: [start, end] // 生成范围的px
    }

如：

plugins: [
    tailwindcssPxPlugin({
        width: [-1, 3],
        height: {
            pxArray: [100],
            range: [10, 12]
        }
    })
]

生成:

• .-w-1px {width: '-1px'} // .-w-1px: width: -1px 不生效，这是负数类的格式。
• .w-3px { width: '3px' }
• h-100px { height: '100px' }
• h-10px { height: '10px' }
• h-11px { height: '11px' }
• h-12px { height: '12px' }

// params2: [变体]
// 这样就能使用 hover:w-1px {} 和 w-1px
plugins: [
    tailwindcssPxPlugin({
        width: [1]
    }, ['hover'])
]

themeName列表

minWidth、width、maxWidth

    tailwindcssPxPlugin({
        minWidth: [1],
        width: [1],
        maxWidth: [1]
    })

• .min-w-1px { min-width: 1px }
• .w-1px { width: 1px }
• .max-w-1px { max-width: 1px }

minHeigt、height、maxHeight

    tailwindcssPxPlugin({
        minHeight: [1],
        height: [1],
        maxHeight: [1]
    })

• .min-h-1px { min-height: 1px }
• .h-1px { height: 1px }
• .max-h-1px { max-height: 1px }

padding

    ailwindcssPxPlugin({
        padding: [1]
    })

• .p-1px { padding: 1px }
• .px-1px { padding-left: 1px; padding-right: 1px;}
• .py-1px { padding-top: 1px; padding-bottom: 1px;}
• .pt-1px { padding-top: 1px }
• .pb-1px { padding-bottom: 1px }
• .pl-1px { padding-left: 1px }
• .pr-1px { padding-right: 1px }

margin

    ailwindcssPxPlugin({
        marigin: [1]
    })

• .m-1px {margin: 1px}
• .mx-1px {margin-left: 1px; margin-right: 1px}
• .my-1px {margin-top: 1px; marigin-bottom: 1px}
• .mt-1px {margin-top: 1px}
• .mb-1px {marigin-bottom: 1px}
• .ml-1px {margin-left: 1px}
• .mr-1px {margin-right: 1px}

borderWidth

    ailwindcssPxPlugin({
        borderWidth: [1]
    })

• .border-1px { border-width: 1px }
• .border-t-1px { border-top-width: 1px }
• .border-b-1px { border-bottom-width: 1px }
• .border-l-1px { border-left-width: 1px }
• .border-r-1px { border-right-width: 1px }

borderRadius

    ailwindcssPxPlugin({
        borderRadius: [1]
    })

• .rounded-1px { border-radius: 1px }
• .rounded-tl-1px {border-top-left-radius: 1px}
• .rounded-tr-1px {border-top-right-radius: 1px}
• .rounded-bl-1px {border-bottom-left-radius: 1px}
• .rounded-br-1px {border-bottom-right-radius: 1px}

inset

    ailwindcssPxPlugin({
        borderRadius: [1]
    })

• .inset-1px { top: 1px; bottom: 1px; left: 1px; right: 1px }
• .top-1px { top: 1px }
• .bottom-1px { bottom: 1px }
• .left-1px { left:1px }
• .right-1px { right: 1px }

fontSize、letterSpacing、lineHeight

    ailwindcssPxPlugin({
        fontSize: [1],
        letterSpacing: [1],
        lineHeight: [1]
    })

• text-1px { font-size: 1px }
• tracking-1px { letter-spacing: 1px }
• leading-1px { line-height: 1px }