npm install tailwindcss
安装了tailwind CSS 之后,我在
require('tailwind')
中添加了
.postcssrc.js
,但导致错误:
类型:无法读取未定义的属性(读取'config')tailwindtypescript
相似于哈里斯的答案,但带有单独的
.css
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组件中添加此示意标签: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: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>
npm install tailwindcss @tailwindcss/postcss
src/css/app.css
或@import "tailwindcss"
现在,您可以开始使用类星体组件中的尾风类。例如:
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
quasar.config.js
.中使用尾风。
如果您不使用sass。开始使用组件中的尾风类。