Quarkc + Tailwind 使用指南

[xxxsf]

import { QuarkElement, customElement } from "quarkc";

import install from '@twind/with-web-components'
import config from './tailwind.config.js'

@customElement({ tag: "my-component"})
class MyComponent extends install(config)(QuarkElement) {
  render() {
    return (
      <div class="h-screen bg-purple-400 flex items-center justify-center">
        Hello world
      </div>
    );
  }
}

tailwind.config.js

import { defineConfig } from '@twind/core'
import presetAutoprefix from '@twind/preset-autoprefix'
import presetTailwind from '@twind/preset-tailwind'

export default defineConfig({
  presets: [presetAutoprefix(), presetTailwind()],
  /* config */
})

package.json

  "dependencies": {
+    "@twind/core": "1.1.3",
+    "@twind/preset-autoprefix": "1.0.7",
+    "@twind/preset-tailwind": "1.1.4",
+    "@twind/with-web-components": "1.1.3"
  },

[xxxsf]

截图：

[yoyo837]

size 大了好多, 并不是只大了使用到的那部分css的size

[OSpoon]

我在 quarkc 组件开发中尝试了引入可以替代 Tailwind 的 UnoCSS，开发时可以得到和 Tailwind 一样的体验，在构建后也不担心产物体积巨增的问题

1. 安装 UnoCSS

npm install -D unocss

2. 配置 UnoCSS

import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';
export default defineConfig({
    plugins: [
        UnoCSS({
            mode: 'shadow-dom',
        })
    ]
});

添加 uno.config.ts 配置文件

// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
  // ...UnoCSS options
})

在样式表中添加 @unocss-placeholder

@customElement({ 
    tag: "my-component", 
    style: `${style}@unocss-placeholder` 
})
class MyComponent extends QuarkElement {}

我在这个分支上做的尝试： https://github.com/OSpoon/cross-platform-components/tree/unocss

[yoyo837]

感谢分享

[yoyo837]

根据quarkc的模版dev是vite，build是rollup，unocss/vite 支持 rollup 吗？另外，unocss的postcss方案支持web component吗？

[yoyo837]

unocss/unocss#3449

[yoyo837]

我的dev是vite，build是rollup，unocss/vite 支持 rollup 吗？另外，unocss的postcss方案支持web component吗？

我验证了，目前版本兼容，可以用postcss方案。