免费的空间网站,四川煤矿标准化建设网站,专做韩餐网站,手机建模软件参考视频
创建项目 新建项目选择uniapp - vue版本这里我选择3 - 点击创建即可 创建完成后#xff0c;如果是要编译到小程序的项目则可以先将项目运行到小程序打开了
初始化package.json
执行
npm init -y安装和配置
安装
npm i -D tailwindcss postcss autoprefixer
# 安…参考视频
创建项目 新建项目选择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 pathconst 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.jsexport 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全局生效
scriptexport default {onLaunch: function() {console.log(App Launch)},onShow: function() {console.log(App Show)},onHide: function() {console.log(App Hide)}}
/scriptstyletailwind 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)()]}}
});然后运行项目到浏览器或者小程序都是正常使用的了
