如何添加与类星体的尾风CSS？

Question

npm install tailwindcss

安装了tailwind CSS 之后，我在

require('tailwind')

中添加了

.postcssrc.js

，但导致错误：

类型：无法读取未定义的属性（读取'config'）tailwindtypescript

相似于哈里斯的答案，但带有单独的

.css

Answer 1

1）

2）

3）

在npm install -D tailwindcss postcss autoprefixer上配置模板路径：

npx tailwindcss init

4）在

tailwind.config.js

创建文件并添加尾风指令：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5）修改文件（需要parwindcss）

src/css/tailwind.css

6）

最后，我们在

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

（CSS选项）中包括了

postcss.config.js

module.exports = {
  plugins: [
    // https://github.com/postcss/autoprefixer
    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') // add this
  ]
}

此外，我建议在所有尾风类中添加一个前缀，因为类星体还拥有一些覆盖尾风的实用程序类。 将此选项添加到解决问题：

tailwind.css

进入您的类星体项目并运行：

quasar.config.js然后转到

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

添加：

tailwind.config.js然后在任何vue.js组件中添加此示意标签：

Answer 2

prefix: 'tw-'

步骤1：安装尾风CSS和Postcs

首先，您需要安装尾风CSS和必要的PostCSS插件。在项目目录中运行以下命令：

run npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7autoprefixer@^9

这将安装Tailwind CSS V4和配置所需的PostCSS插件。

步长2：在您的CSS

中导入逆风

在您的

.postcssrc.js

（或任何其他全局CSS文件）中，导入后风CSS：

Answer 3

module.exports = {
  plugins: [
    // to edit target browsers: use "browserslist" field in package.json
    require('autoprefixer'),
    require('tailwindcss')

  ],
}

这将确保在整个应用程序中都可以使用尾风的样式。

步骤3：配置PostCSS

NEXT，您需要配置PostCSS以使用尾风。打开或创建项目根部的文件，并添加以下内容：

<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</style>

这种配置可确保autoprefixer之后的邮递处理。

步骤4：

npm install tailwindcss @tailwindcss/postcss

无需更改

由于您不使用SASS，而仅使用普通CSS使用tailwind，因此您无需对

src/css/app.css

或

@import "tailwindcss"

文件进行任何更改。 Quasar将自动拾取PostCSS配置。

步骤5：开始使用tailwind

现在，您可以开始使用类星体组件中的尾风类。例如：

postcss.config.js

summary

安装后风CSS和PostCSS插件：

import tailwind from '@tailwindcss/postcss'

module.exports = {
  plugins: [
    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'
      ]
    }),
    tailwind
  ]
}

。

在您的全局CSS文件（

quasar.config.js

）中的Import taildind。 configure postcss在

quasar.config.js

.

中使用尾风。

如果您不使用sass。

开始使用组件中的尾风类。