昨天晚上提了个issues,今天早上原作者就发了一个版本解决了,这就是前端更新的速度!!!

现在可以按照quasar集成Vite插件的文档以及tailwindcss4.0的集成文档进行集成了。

tailwindcss4.0的正式版发布了有一段时间,经历了简单的沉淀过后,于是便尝试测测整合的demo

看了tailwindcss4.0的集成文档,顿时感觉就这,正常情况下集成Vite基本没有任何时间成本。

由于quasar也是基于vite的,寻思应该不难,果然,难不难只有集成过后才知道。不知道是quasar的问题还是tailwindcss4.0的问题,或者都有问题,集成vite没问题,集成quasar就有问题了,quasar集成unocss没有问题,但是集成tailwindcss4.0就不能用。待我整理一下给quasar提个issues,感觉quasar的问题大点,因为按照tailwindcss4.0官方的集成文档集成Vite是没有问题,到你这有问题,嗯~~~。

核心配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file

import { defineConfig } from '#q-app/wrappers'
import { fileURLToPath } from 'node:url'
export default defineConfig((ctx) => {
return {
// ······省略部分
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
css: ['app.scss', 'app.css'], // 这里新增一个app.css,!!!!!!!!
// ······省略部分
vitePlugins: [
[
'@intlify/unplugin-vue-i18n/vite',
{
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,

// if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
// you need to set `runtimeOnly: false`
// runtimeOnly: false,

ssr: ctx.modeName === 'ssr',

// you need to set i18n resource including paths !
include: [fileURLToPath(new URL('./src/i18n', import.meta.url))],
},
],
[
'vite-plugin-checker',
{
vueTsc: true,
eslint: {
lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{ts,js,mjs,cjs,vue}"',
useFlatConfig: true,
},
},
{ server: false },
],
//['unocss/vite', {}],
['@tailwindcss/vite', {}], // 这样配置即可
// tailwindcss这个貌似还不完善,需要自己配置处理一下。只能使用这种方式加载插件,使用上面的方式不生效!!!!!!!
// [tailwindcss as unknown as string, {}], // 不用这种语法了,app-vite 2.1.4 版本已经修复了。
],
},
// ·······省略部分
}
})

在app.scss文件目录中新建app.css文件

1
@import 'tailwindcss';

这时候就阔以了。实际tailwindcss使用PostCSS配置我也试了,这种方式是可以了,不过说是性能没有vite插件好,所以这边单独记录了quasarVite模式集成tailwindcss的方法。

最后,之前我一直用unocss,但是我看的文档一直都是tailwindcss的文档,之前因为tailwindcss太拉跨,又慢又重,所以我选择了unocss,

现在tailwindcss4.0的性能已经不是问题了,争气了,于是不如直接用tailwindcss正版。

以上,结束。