赞
踩
tailwindcss 中文文档
windicss 英文文档
我是通过vue-cli创建的项目,HBuilderX没有试过,这里介绍使用vue-cli创建的项目,可查看官方文档。这里有两种配置方式(重置主题和重命名类),目的都是考虑兼容性,您可根据实际情况处理。英文
vue create -p dcloudio/uni-preset-vue my-project
npm install tailwindcss@npm:@tailwindcss/postcss7-compat -D
tailwindcss
在项目根目录创建
tailwind.config.js
文件,用于配置tailwindcss
。
// tailwind.config.js
module.exports = {
purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false,
separator: '__', // 兼容小程序,将 : 替换成 __
theme: {
// 兼容小程序,将默认配置里带 .和/ 清除
// 如果有些属性你没有用到,请在 corePlugins 里禁用
extend: {},
fontSize: {},
height: {},
inset: {},
screens: {},
spacing: {},
translate: {},
width: {}
},
variants: {},
plugins: [],
corePlugins: {
// 兼容小程序,将带有 * 选择器的插件禁用
preflight: false,
space: false,
divideColor: false,
divideOpacity: false,
divideStyle: false,
divideWidth: false
}
}
postcss
在根目录的
postcss.config.js
中的plugins
属性添加引入。注意要放在@dcloudio/vue-cli-plugin-uni/packages/postcss
之前,非小程序端才能将rpx
转换。
// postcss.config.js
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('tailwindcss'),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
这里和重置主题配置不同是,不重置默认的配置,而是将配置中类名带.和/替换其他兼容字符。
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-class-rename -D
tailwindcss
// tailwind.config.js
module.exports = {
purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false,
separator: '__', // 兼容小程序,将 : 替换成 __
theme: {
extend: {}
},
variants: {},
plugins: [],
corePlugins: {
// 兼容小程序,将带有 * 选择器的插件禁用
preflight: false,
space: false,
divideColor: false,
divideOpacity: false,
divideStyle: false,
divideWidth: false
}
}
配置 postcss
// postcss.config.js
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve(id) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('tailwindcss'),
require('postcss-class-rename')({
'\\\\.': '_' // 兼容小程序,将类名带 .和/ 替换成 _
}),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
配置完成后我们引入
tailwindcss
,注意不要在main.js
中引入,因为APP端无效,需要在App.vue
中引入。
<style>
@import url('tailwindcss/tailwind.css');
</style>
这是我项目的依赖给大家参考一下:
安装的是兼容版的:详细安装请移步>>> tailwindcss官网-安装
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npx tailwindcss-cli@latest init
这步会生成tailwindcss.config
文件
除此外请自行安装上图其他依赖
到这里项目录应该是这样的:
在src 目录新建 style 文件夹并创建tailwind.css
在tailwind.css 中写入
@tailwind base;
@tailwind components;
@tailwind utilities;
import "@/style/tailwind.css"
将这段覆盖
tailwindcss.config.js
module.exports = {
// Tree-shake unused styles in production build
// purge: ['./src/**/*.{vue,js,ts,jsx,tsx,html}'],
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
// Disable breakpoints
screen: {}
},
variants: {
extend: {},
},
plugins: [],
corePlugins: {//禁用一些小程序class不支持的分割
space: false,
divideWidth: false,
divideColor: false,
divideStyle: false,
divideOpacity: false,
}
}
postcss.config.js
中写入,通过postcss-class-rename
将小程序不支持的分割替换掉如:w-3/4中的/⚠这步很重要 否则就会报如下错误
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve (id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
require("tailwindcss")({ config: "./tailwind.config.js" }),
/* ******* 引入tailwindcss ******* */
// // 根据平台差异进行不同的样式处理
...(
process.env.UNI_PLATFORM !== "h5"
? [
// 使用postcss-class-name 包将小程序不支持的类名写法转换为支持的类名,如:"hover:xxx"
require("postcss-class-rename")({
"\\\\:": "--",
"\\\\/": "--",
"\\\\.": "--",
".:": "--",
"\\\*": "--",
})
]
: [
require("autoprefixer")({
remove: true,
}),
]
),
]
}
tsconfig.json
配置
{
"compilerOptions": {
"types": [
"@dcloudio/types",
"miniprogram-api-typings",
"mini-types"
],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。