如何在类星体框架中使用尾风CSS？
如何在类星体框架中使用尾风CSS？
提问于 2021-11-19 11:39:36
我一直试图使用尾风来自定义类星体组件，但是类星体CSS已经覆盖了大部分尾风CSS。
我在我的tailwind.config.js中添加了一个前缀，在下面的示例中，我的Tailwind类以tw为前缀。
module.exports = {
prefix: 'tw-',
}回答 3
Stack Overflow用户
回答已采纳
发布于 2022-01-27 10:27:31
就像类星体的开发人员所说的，prefixing tailwind classes is the recommended way这样做。所以你是对的！
更深层次的是，最有趣的部分似乎使用Unocss来玩它对其他框架(如Tailwind )的预置
Stack Overflow用户
发布于 2022-06-29 20:26:26
我们能够让TailwindCSS使用unocss (它支持TailwindCSS语法)使用类星体。
我们遵循了这个教程，但在一个要点中，这是您需要做的：
安装unocss webpack软件包和预置：
yarn install -D @unocss/webpack
yarn install -D @unocss/preset-uno使用以下内容在src/ boot /中创建一个引导文件cass UnoCSS.js：
import 'uno.css'更新您的quasar.config.js
const UnoCSS = require('@unocss/webpack').default
const presetUno = require('@unocss/preset-uno').default
module.exports = configure(function (ctx) {
// ...
boot: [
'UnoCss' // name of your boot file
]
// ...
build: {
// ...
extendWebpack (cfg) {
cfg.plugins.push(UnoCSS({
presets: [
presetUno()
]
}))
},
// ...
}
//...
}使用quasar dev启动开发服务器
而且您应该能够使用任何TailwindCSS类。
注意:样式不会在页面上自动刷新，当您更新时，您需要手动刷新页面以查看更改。
Stack Overflow用户
发布于 2022-11-14 20:35:41
对我来说，我不得不使用.css而不是类星体.scss作为全局css，如下所示
安装
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -ptailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
};postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 4 Safari versions',
'last 4 Android versions',
'last 4 ChromeAndroid versions',
'last 4 FirefoxAndroid versions',
'last 4 iOS versions',
],
}),
require('tailwindcss'),
],
};quasar.config.js
css: ['app.scss', 'tailwind.css'],tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70034269
复制相关文章
相似问题
腾讯云开发者
