当前位置：首页 > news >正文

将TailwindCSS默认单位rem转换为px

news 2025/8/9 2:37:00

前言：

我这里需要将默认的rem 转换为 px 原因是要使用 postcss-px-to-viewport 插件做移动端适配。

在tailwind.config.js文件中进行配置：

        注意：这里 padding（内边距）、spacing（外边距）、width（宽度）、height（高度）的转化都 *4，所以针对上述这几个属性配置后的使用效果示例如下：

        p-4 ==> padding: 16px;

        ml-1 ==> margin-left: 4px;

w-2 ==> width: 8px;

  h-3 ==> height: 12px;

        leading-4 ==> line-height: 16px;

而 borderRadius（圆角）、 fontSize（字体）这两个属性就是直接转化，示例如下：

        text-18 ==> font-size: 18px;

        rounded-16 ==> border-radius: 16px;

/** @type {import('tailwindcss').Config} */
export default {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {// 内边距padding: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),// 外边距spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),// 圆角borderRadius: Array.from({ length: 100 }).reduce((map, _, index) => {map[index] = `${index}px`return map}, {}),extend: {// 宽度width: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),// 高度height: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),// 字体大小fontSize: Array.from({ length: 100 }).reduce((map, _, index) => {map[index] = `${index}px`return map}, {}),// 行高lineHeight: Array.from({ length: 1000 }).reduce((map, _, index) => {map[index] = `${index * 4}px`return map}, {}),},},plugins: [],
}

查看全文

http://www.lryc.cn/news/349915.html