UniApp配置使用原子化tailwindcss
创建项目
新建项目选择uniapp - vue版本这里我选择3 - 点击创建即可
创建完成后，如果是要编译到小程序的项目则可以先将项目运行到小程序打开了
初始化package.json
执行
npm init -y
安装和配置
安装
npm i -D tailwindcss postcss autoprefixer
# 安装完成后再初始化 tailwind.config.js 文件
npx tailwindcss init
配置
在项目目录下创建 shared.js，代码如下,为了保证后面这个方法可以复用
import path from 'path'
const resolve = (p) => {
return path.resolve(__dirname, p)
}
module.exports = {
resolve
}
在项目根目录下创建vite.config.js，用于注册引用tailwindcss，代码如下：
import {
defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {
resolve
} from './shared.js'
export default defineConfig({
plugins: [uni()],
css: {
postcss: [
require('tailwindcss')({
config: resolve("./tailwind.config.js")
}),
require('autoprefixer')()
]
}
});
找到项目根目录下的 tailwind.config.js，这个在上面有初始化命令的，内容更改如下：
const {
resolve
} = require('./shared.js')
module.exports = {
// 这里给出了一份 uni-app /taro 通用示例，具体要根据你自己项目的目录结构进行配置
// 不在 content 包括的文件内，你编写的 class，是不会生成对应的css工具类的
content: ['./public/index.html', './pages/**/*.{html,js,ts,jsx,tsx,vue}','./components/**/*.{html,js,ts,jsx,tsx,vue}'].map(resolve),
// 其他配置项
// ...
corePlugins: {
// 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
preflight: false
}
}
找到App.vue，配置tailwindcss全局生效
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
插件安装
npm i -D weapp-tailwindcss
安装完成后，在package.json里面配置如下命令
"scripts": {
"postinstall": "weapp-tw patch"
}
注册
找到根目录下的vite.config.js，内容如下：
import {
defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import {
resolve
} from './shared.js';
import {
UnifiedViteWeappTailwindcssPlugin as uvwt
} from "weapp-tailwindcss/vite";
export default defineConfig({
plugins: [uni(), uvwt({
// 由于 hbuilderx 会改变 process.cwd 所以这里必须传入当前目录的绝对路径
// 上面参考视频没有这一个,但是不加的话会报错
tailwindcssBasedir: __dirname
})],
css: {
postcss: {
plugins: [
require('tailwindcss')({
config: resolve("./tailwind.config.js")
}),
require('autoprefixer')()
]
}
}
});
然后运行项目到浏览器或者小程序都是正常使用的了
原文地址：https://blog.csdn.net/weixin_68658847/article/details/144444349
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！