vite-plugin-uni-tailwind-no-pnpm

v0.0.1

Published

5 months ago

支持在 uni-app 中使用 TailwindCSS@3 原有语法开发

Downloads

0High
0Medium
0Low

banlizai

vite transform tailwind tailwindcss vite-plugin uni-app uniapp miniprogram mini-program

@uni-helper/vite-plugin-uni-tailwind

支持在 uni-app 中使用 TailwindCSS@3 原有语法开发小程序。支持 vite v2，v3 和 v4，要求 node >= 14.18。

使用

参考 TailwindCSS 文档在 uni-app 项目中安装配置 TailwindCSS。你无需禁用 preflight，也无需调整原有语法（如 .w-[200.5rpx] 等），你只需要正常书写类名，该插件会替你处理剩下的事情。

安装依赖。

npm install @uni-helper/vite-plugin-uni-tailwind -D

配置 vite.config.ts。

import { defineConfig } from 'vite';
// @ts-ignore
import nested from 'tailwindcss/nesting';
import tailwindcss from 'tailwindcss';
import tailwindcssConfig from './tailwind.config.ts'; // 注意匹配实际文件
import postcssPresetEnv from 'postcss-preset-env';
import uni from '@dcloudio/vite-plugin-uni';
import uniTailwind from '@uni-helper/vite-plugin-uni-tailwind';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        nested(),
        tailwindcss({
          config: tailwindcssConfig,
        }),
        postcssPresetEnv({
          stage: 3,
          features: { 'nesting-rules': false },
        }),
      ],
    },
  },
  plugins: [
    uni(),
    uniTailwind({
      /* options */
    }),
  ],
});

完整示例请查看 playground。

配置项 `Options`

`shouldApply`

类型：boolean | ((currentPlatform: string) => boolean)
默认值：编译为小程序和快应用时应用

是否应用该插件。

APP 使用 WebView 运行，H5 使用浏览器运行，基本都支持特殊字符，所以默认编译为小程序和快应用时应用该插件。

`shouldTransformAttribute`

类型：(attribute: string) => boolean
默认值：转换以 class、Class、classname、className、ClassName、class-name 结尾的 attribute

是否转换某个 attribute。

`shouldTransformScript`

类型：(fileName: string) => boolean
默认值：转换 pages、components、layouts 开头的脚本文件

是否转换某个脚本文件。

`characterMap`

类型：[string, string][]
默认值如下

[
  ['[', '-'],
  [']', '-'],
  ['(', '-'],
  [')', '-'],
  ['$', '-v-'], // css variable
  ['#', '-h-'], // hash
  ['!', '-i-'], // important
  ['/', '-s-'], // slash
  ['.', '-d-'], // dot
  [':', '_'], // colon
  ['%', '-p-'], // percentage
  ["'", '-q-'], // quote
  ['+', '-a-'], // add
  ['=', '-e-'], // equal
  ['&', '-n-'], // and
  ['?', '-qm-'], // question mark
  ['@', '-at-'], // at
  ['*', '-w-'], // wildcard
  [',\\s', '-c-'], // comma
  [',', '-c-'], // comma
  ['\\2c\\s', '-c-'], // comma
  ['\\2c', '-c-'], // comma
  ['\\\\2c\\s', '-c-'], // comma
  ['\\\\2c', '-c-'], // comma
];

所有生成样式中特殊字符需要替换成什么字符串。

如果不替换，可能会导致无法正常运行。如果确认无需替换，请设置为空数组。