如何将 Tailwind CSS 与 Quasar 框架结合使用？

Question

我一直在尝试使用 Tailwind 来自定义 Quasar 组件，但是 Quasar CSS 已经覆盖了 Tailwind CSS 的大部分内容。

我向我的 Tailwind 类添加了一个前缀，tailwind.config.js其前缀为 tw- ，如下例所示。

module.exports = {
  prefix: 'tw-',
}

Answer 1

Quasar 的 github 上有一个专门的问题

正如一位 Quasar 开发者所说，prefixing tailwind classes is the recommended way这样做。所以你是对的！

更深入地说，最有趣的部分似乎是使用它对其他框架（如 Tailwind）的Unocss预设

编辑

团队似乎正在考虑UnoCSS集成并使 Quasar 的 CSS 可与 Tailwind 交换Quasar v3 https://github.com/orgs/quasarframework/projects/2?pane=issue&itemId=1451670

Answer 2

对我来说，我必须使用 .css 而不是 .scss，类星体用作全局 css，所以步骤如下

安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.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'),
  ],
};

类星体.config.js

    css: ['app.scss', 'tailwind.css'],

顺风.css

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