前言:
我这里需要将 默认的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: [],
}