可以支持prefix的类名转换吗？

[yuuk]

例如，某个组件库使用了tailwindcss，为了防止与宿主项目tailwind类名冲突自定义了prefix，例如:

// 组件库的 tailwind.config.js 配置
module.exports = {
    ...,
    prefix: 'tw-'
}

将组件库接入到taro宿主项目中，必须在宿主项目中配置中也定义同样的prefix才能转换模板文件上的class名称，否则只是转换了css，这样就无法避免类名冲突。

// 不会被转换
<View className="tw-top-1/2"></View>

// 会被转换
<View className="top-1/2"></View>

[sonofmagic]

其实这个现在就支持，因为 tailwindcss 实际上是可以多上下文的，详见 https://tailwindcss.com/docs/functions-and-directives#config

所以使用 @config 就简单了，你创建一个额外的 tailwind.config.js 文件，用来创建额外的上下文:

const path = require('path')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [path.resolve(__dirname, "./TailwindPrefix.tsx")],
  prefix: 'my-',
  corePlugins: {
    preflight: false
  }
}

然后创建一个额外的 scss :

@config "./tailwind.config.js";

// @tailwind base;
// @tailwind components;
@tailwind utilities;

然后这个目录下面，你有一个组件 TailwindPrefix.tsx:

import React from "react";
import { View } from '@tarojs/components'
import './TailwindPrefix.scss'

export const TailwindPrefix: React.FC = () => {
  return <View className="my-text-[#11e331]">Tailwindcss Prefix </View>
}

这时候，新的上下文就能够从里面 TailwindPrefix.scss 里的 @config "./tailwind.config.js"; 中创建额外上下文

然后从 tailwind.config.js 的 content 中，获取到 TailwindPrefix.tsx 里的 token 然后就能够加载到 tailwindcss 上下文里进行转译了。

转译结果:

{className:"my-text-_h11e331_",children:"Tailwindcss Prefix "}

.my-text-_h11e331_{--tw-text-opacity:1;color:rgb(17 227 49/var(--tw-text-opacity))

[yuuk]

尝试了一下，不知道是不是我的姿势不对... 它会针对组件库的css再生成一份css，并且css的值还不对（可能是需要把组件库的tailwind配置和项目内额外的tailwind配置保持一致）

[sonofmagic]

是的，这个是需要保持一致的，这点我和你解释一下，tailwindcss 的核心原理。

其实

@tailwind base;
@tailwind components;
@tailwind utilities;

他们的本质，就是根据你 tailwind.config.js 里面配置的内容，去展开成 css

所以，你其实是需要去提炼一些共同的配置，来生成出类似的 css 的。

组件的 @config ./tailwind.com.config.js 走一个配置，然后不加这个的，走根目录下的 tailwind.config.js

同时共享一些 extend ， plugin，preset 啥的

[yuuk]

搞定了，感谢~