网站设置关键词,建企业网站,广东建设网三库一平台,软装设计公司名称前言#xff1a; 我这里需要将 默认的rem 转换为 px 原因是要使用 postcss-px-to-viewport 插件做移动端适配。 在tailwind.config.js文件中进行配置#xff1a; 注意#xff1a;这里 padding#xff08;内边距#xff09;、spacing#xff08;外边距#xff09;、width… 前言 我这里需要将 默认的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}pxreturn map}, {}),// 外边距spacing: Array.from({ length: 1000 }).reduce((map, _, index) {map[index] ${index * 4}pxreturn map}, {}),// 圆角borderRadius: Array.from({ length: 100 }).reduce((map, _, index) {map[index] ${index}pxreturn map}, {}),extend: {// 宽度width: Array.from({ length: 1000 }).reduce((map, _, index) {map[index] ${index * 4}pxreturn map}, {}),// 高度height: Array.from({ length: 1000 }).reduce((map, _, index) {map[index] ${index * 4}pxreturn map}, {}),// 字体大小fontSize: Array.from({ length: 100 }).reduce((map, _, index) {map[index] ${index}pxreturn map}, {}),// 行高lineHeight: Array.from({ length: 1000 }).reduce((map, _, index) {map[index] ${index * 4}pxreturn map}, {}),},},plugins: [],
}
