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

问题描述 投票:0回答:3
npm install tailwindcss

安装了tailwind CSS 之后,我在

require('tailwind')

中添加了

.postcssrc.js
,但导致错误:

类型:无法读取未定义的属性(读取'config')tailwindtypescript

相似于哈里斯的答案,但带有单独的
.css
vue.js vuejs3 quasar-framework quasar
3个回答
6
投票

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组件中添加此示意标签:

1
投票
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:

0
投票
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。
开始使用组件中的尾风类。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.