HBuilderX创建uniapp项目使用 tailwindcss

文章目录

  • 一、创建package.json文件
  • 二、打开终端 yarn / npm 安装依赖
  • 三、创建 vue.config.js文件
  • 四、创建postcss.config.js文件
  • 五、创建tailwind.config.js文件
  • 六、App.vue文件的style中引入tailwindcss

一、创建package.json文件

{"devDependencies": {"autoprefixer": "9","postcss": "7","postcss-rem-to-responsive-pixel": "^5.1.3","tailwindcss": "npm:@tailwindcss/postcss7-compat","weapp-tailwindcss-webpack-plugin": "^1.6.8","webpack": "npm:webpack@webpack-4"}
}

二、打开终端 yarn / npm 安装依赖

三、创建 vue.config.js文件

// 为了 tailwindcss jit 开发时的热更新
if (process.env.NODE_ENV === "development") {process.env.TAILWIND_MODE = "watch";
}const {UniAppWeappTailwindcssWebpackPluginV4,
} = require("weapp-tailwindcss-webpack-plugin");/*** @type {import('@vue/cli-service').ProjectOptions}*/
const config = {//....configureWebpack: {plugins: [new UniAppWeappTailwindcssWebpackPluginV4()],},//....
};module.exports = config;

四、创建postcss.config.js文件

const path = require("path");module.exports = {plugins: [require("autoprefixer")({remove: process.env.UNI_PLATFORM !== "h5",}),require("tailwindcss")({config: path.resolve(__dirname, "./tailwind.config.js"),}),// rem 转 rpxrequire("postcss-rem-to-responsive-pixel/postcss7")({rootValue: 32,propList: ["*"],transformUnit: "rpx",}),],
};

五、创建tailwind.config.js文件

const path = require("path");
const resolve = (p) => {return path.resolve(__dirname, p);
};/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {mode: "jit",purge: {content: [resolve("./index.html"),resolve("./pages/**/*.{vue,js,ts,jsx,tsx,wxml}"),],},darkMode: false, // or 'media' or 'class'theme: {colors: {white: '#ffffff',black: '#000000',main: '#333333',content: '#666666',muted: '#999999',light: '#e5e5e5',primary: {DEFAULT: '#4173ff'},success: '#5ac725',warning: '#f9ae3d',error: '#f56c6c',info: '#909399',page: '#f6f6f6'},fontSize: {xs: '24rpx',sm: '26rpx',base: '28rpx',lg: '30rpx',xl: '32rpx','2xl': '34rpx','3xl': '38rpx','4xl': '40rpx','5xl': '44rpx'}},variants: {},plugins: [],corePlugins: {preflight: false,},
};
//自定义配置

六、App.vue文件的style中引入tailwindcss

<style>/*每个页面公共css */@import "tailwindcss/base";@import "tailwindcss/utilities";
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/711744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯算法 一.

分析&#xff1a; 本题记录&#xff1a;m个数&#xff0c;异或运算和为0&#xff0c;则相加为偶数&#xff0c;后手获胜。 分析&#xff1a; 369*99<36500&#xff0c;369*100>36500。 注意&#xff1a;前缀和和后缀和问题

知识(202402)

1.Conditional Conditional来源于spring-context包下的一个注解。Conditional中文是条件的意思&#xff0c;Conditional注解它的作用是按照一定的条件进行判断&#xff0c;满足条件给容器注册bean。 可以控制一个配置类是否注入到容器中&#xff0c;比如控制xxl-job不自动注册…

【wpf】关于绑定的一点明悟

背景简介 软件功能为&#xff0c;读取一个文件夹下的所有子文件夹&#xff0c;每个文件夹对自动对应生成 一组 “按键四个勾选” 按键点击触发&#xff0c;可以发送与其对应文件夹中的一些内容。这个绑定的过程我在之前的文章有过详细的介绍&#xff0c;非常的简单。 这里回顾…

3月1日做题总结(静态库与动态库)

前言 最近学到了静态库和动态库的相关知识&#xff0c;就顺便整理了一下相关题目。如果对静态库和动态库知识不熟悉的同学&#xff0c;推荐看这篇文章——《静态库与动态库》&#xff0c;讲的很详细。 第一题 关于静态库与动态库的区别&#xff0c;以下说法错误的是&#xff…

mac jupyter使用现有的python环境

mood&#xff1a;python 编程真的是在反复的与自己和解啊 本来超级的畏难情绪 读会儿书 计算机博士的书 感觉还是要坚强的。《研磨记》--一位博士生的回忆录 作者技术真的强啊 正文开始&#xff1a; 聚焦搜索&#xff0c;打开终端激活虚拟环境&#xff1a;conda activate pyt…

力扣爆刷第83天之hot100五连刷1-5

力扣爆刷第83天之hot100五连刷1-5 文章目录 力扣爆刷第83天之hot100五连刷1-5一、1. 两数之和二、49. 字母异位词分组三、128. 最长连续序列四、283. 移动零五、11. 盛最多水的容器 一、1. 两数之和 题目链接&#xff1a;https://leetcode.cn/problems/two-sum/description/?…

javascript中使用‘use strict’和不使用的区别

错误处理&#xff1a; 严格模式使得 JavaScript 对某些可能的问题抛出错误&#xff0c;而在非严格模式下&#xff0c;这些问题可能会被忽略。例如&#xff0c;未声明的变量&#xff08;即全局变量&#xff09;在非严格模式下会被隐式地创建为全局变量&#xff0c;而在严格模式…

十一、 二进制位运算

描述 Python有位运算&#xff0c;是直接将数字看成二进制&#xff0c;直接对二进制数字的每一位进行运算。现输入两个十进制整数x、y&#xff0c;请计算它们的位与、位或&#xff0c;输出按照十进制的形式。 输入描述&#xff1a; 一行输入两个整数x、y&#xff0c;以空格间…

git:合并两个不同仓库的代码

有两个代码仓库&#xff1a;代码仓库A、代码仓库B&#xff0c;其中一个仓库的代码是为了新项目拉取的新分支&#xff0c;所以分支的部分修改历史是相同的 现在要将代码仓库B 的代码合并到代码仓库A 实现思路&#xff1a;分支合并 实现步骤&#xff1a; # 1、clone代码仓库A…

外汇天眼:ASIC 获得针对前 Blockchain Global 董事的临时出行限制令

澳大利亚证券与投资委员会&#xff08;ASIC&#xff09;已经针对前Blockchain Global Limited&#xff08;清算中&#xff09;董事梁国&#xff08;又名Allan Guo&#xff09;获得了临时旅行限制令。这些命令在其他方面&#xff0c;阻止郭先生在2024年8月20日或进一步命令之前离…

(done) 如何计算 Hessian Matrix 海森矩阵 海塞矩阵

参考视频1&#xff1a;https://www.bilibili.com/video/BV1H64y1T7zQ/?spm_id_from333.337.search-card.all.click 参考视频2&#xff08;正定矩阵&#xff09;&#xff1a;https://www.bilibili.com/video/BV1Ag411M76G/?spm_id_from333.337.search-card.all.click&vd_…

【JGit】 AddCommand 新增的文件不能添加到暂存区

执行git.add().addFilepattern(".").setUpdate(true).call() 。新增的文件不能添加到暂存区&#xff0c;为什么&#xff1f; 在 JGit 中&#xff0c;setUpdate(true) 方法用于在调用 AddCommand 的 addFilepattern() 方法时&#xff0c;将已跟踪文件标记为需要更新。…

C语言基础—习题及代码(一)

1.读取一个65到122之间的整型数&#xff0c;然后以字符形式输出它&#xff0c;比如读取了97&#xff0c;输出字符a #include <stdio.h> int main(){int n;scanf("%d",&n);if(n>65 && n<122){printf("%c\n",n);} } 2.判断某个年份…

windows安装部署node.js以及搭建运行第一个Vue项目

一、官网下载安装包 官网地址&#xff1a;https://nodejs.org/zh-cn/download/ 二、安装程序 1、安装过程 如果有C/C编程的需求&#xff0c;勾选一下下图所示的部分&#xff0c;没有的话除了选择一下node.js安装路径&#xff0c;直接一路next 2、测试安装是否成功 【winR】…

语义内核框架(Semantic Kernel)

语义内核框架-Semantic Kernel 首先看看官方描述&#xff1a;Semantic Kernel 是一个开源 SDK&#xff0c;可让您轻松构建可以调用现有代码的代理。作为高度可扩展的 SDK&#xff0c;可以将语义内核与来自 OpenAI、Azure OpenAI、Hugging Face 等的模型一起使用&#xff01;通…

vue3.4新特性:v-bind同名简写、defineModel

在上一篇 vue3.3 文章中&#xff0c;虽然写了 defineModel &#xff0c;但并未考虑到写的时候3.4版本里 defineModel 才作为稳定的API正式加入( 两年没看vue3 更新的内容了... )&#xff0c;并增加了对支持修饰符相关的内容&#xff1b; 基于此&#xff0c;如果在vue3.3的版本…

华为OD机试真题-智能成绩表-2023年OD统一考试(C卷)---Python3--开源

题目&#xff1a; 考察内容&#xff1a; sort(双排序&#xff09; if dict(keys;items()) 代码&#xff1a; """ analyze:input: int n 学生人数&#xff1b; int m 科目数量 科目名称&#xff08;不重复&#xff09; 人名(不会重名&#xff09; 科目成绩 …

Python 在Word中查找并高亮指定文本

当你需要在长文档或报告中快速找到特定的关键词或短语&#xff0c;Word中提供的查找并高亮这一功能可以帮助你迅速定位这些内容。本文将介绍如何使用Python在Word中查找并突出显示指定的文本。 所需工具&#xff1a;第三方库 Spire.Doc for Python。该库支持创建、编辑、转换Wo…

vue处理响应式数据,是Proxy性能好?还是defineProperty性能好?

注&#xff1a;本文主要论证二者性能&#xff01;&#xff01;&#xff01; 首先&#xff0c;Proxy和defineProperty是两种不同的机制&#xff0c;用于实现JavaScript的元编程&#xff08;metaprogramming&#xff09;功能。 defineProperty是ES5引入的一个特性&#xff0c;用于…

HDL FPGA 学习 - FPGA基本要素,开发流程,Verilog语法和规范、编写技巧

目录 Altera FPGA 基本要素 FPGA 开发流程和适用范围 设计和实施规范 顶层设计的要点 Verilog HDL 语法规范 编写规范 设计技巧 编辑整理 by Staok&#xff0c;始于 2021.2 且无终稿。转载请注明作者及出处。整理不易&#xff0c;请多支持。 本文件是“瞰百易”计划的…