2023年使用Javascript / Typescript的自定义解决方案
注意:本答案适用于那些确实需要通过CSS选择器来限定Tailwind样式,而不能使用Tailwind配置中的前缀或important特性的人。此外,本答案还涵盖了使用Javascript将CSS导入到应用程序的场景。
基于事实,Vite / Tailwind在构建过程中阻止了对@Luud Janssen方法的支持,会记录下面的文本:
Nested @tailwind rules were detected, but are not supported. Consider using a prefix to scope Tailwind's classes...
我在花了几个小时尝试使用postcss却没有成功后,想出了下一个想法。我没有改变postcss配置文件或vite配置文件中的任何内容。
我的项目是基于Vue3 + Vite构建的,所以基本上我是在入口TS文件(通常是main.ts)中导入根tailwind.css文件。所需的依赖是
sass。
步骤
1.
请删除这个导入语句,然后转到您应用程序的根组件(通常是App.vue)并从
sass库中导入tailwind文件和compileString函数。
import tailwindFile from '@/core/assets/tailwind/tailwind.css?inline';
import { compileString } from 'sass';
Vue建议在组件内部导入静态CSS文件时使用?inline。
2.
之后,在组件的设置脚本中执行:
const tailwindScoped = compileString(`.scope { ${tw} }`).css;
现在,在
tailwindScoped变量中,有一个包含作用域tailwind类的字符串,同时也支持清除和自定义类。
3.
最后,我在模板中使用它在style HTML标签中。顺便说一下,Vue禁止使用该标签,所以还有一个解决方法来实现这个:
<component :is="'style'">
{{ tailwindScoped }}
</component>
我知道这不是最好的方法,而且还会影响性能,但我找不到其他的办法。
import 'tailwindcss/tailwind.css'
添加到我的main.js
中。更改postcss.config.js
以包括postcss-nested
插件。在我的根App.vue
中添加<style lang="scss">#app {@tailwind base; @tailwind components; @tailwind utilities; @tailwind screens;}</style>
。 - Chuck Taylor