Tailwindcss配置pxToviewport

Tailwindcss配置pxToviewport

插件版本

tailwindcss：@^4
postcss: ^8.3.8
vite: ^6.0.5

下面以 vite配置为例

这里以tailwindcss@^4版本为例，如果使用的是vite，则需要安装@tailwindcss/vite插件，详细内容参考 tailwindcssWithVite插件

配置vite插件

npm install tailwindcss @tailwindcss/vite

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

2. 安装 postcss

npm install @tailwindcss/postcss postcss

3. 项目根目录初始化 postcss.config.mjs

注意esm和cjs的区别，根据项目配置需要选择是esm还是cjs，这里以esm为例

/**
 * @type {import('tailwindcss').Config}
 */
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

4. 安装 viewportTopx插件

npm install postcss-px-to-viewport-8-plugin -D

postcss-px-to-viewport 插件已经不维护了，推荐使用 postcss-px-to-viewport-8-plugin

⚠️注意postcss 版本

"postcss": "^8.3.8", // 8.0.0版本都不会转单位
"postcss-loader": "^6.1.1",

5. 配置 postcss.config.mjs

import autoprefixer from 'autoprefixer'
import tailwindcss from '@tailwindcss/postcss'
import px2viewport from 'postcss-px-to-viewport-8-plugin'

/**
 * @type {import('tailwindcss').Config}
 */
export default {
  plugins: [
    autoprefixer(),
    tailwindcss({ base: './tailwind.config.ts' }),
    px2viewport({
      unitToConvert: 'px', // 要转化的单
      viewportUnit: 'vw',
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ['*'],
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: true,
      replace: true, // 是否直接更换属性值，而不添加备用属性
      exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是375
      mediaQuery: true, // 允许在媒体查询中转换 px
    }),
  ],
}

注意⚠️

1. px2viewport 中，mediaQuery 要配置为true，否则tailwindcss的样式是不会被转换的，只会转换css文件中的px单位
2. exclude 一般是忽略node_modules中的文件，因为node_modules中的文件一般不需要转换，但是有个特殊点，如果想将组件库中的样式也转换掉，需要配置include目录，如果配置了 include目录，则只会转换include目录中的文件

最后启动项目，应该可以直接看到单位转换后的vw单位了

写在最后

目前postcss-px-to-viewport-8-plugin不支持解析行内样式，目前没有找到合适的插件去解决这个问题，只能通过辅助函数或者通过自定义babel loader 去转换px，如果大家有好的方案，可以评论区讨论。