当前位置: 首页 > news >正文

【uniapp】vue3+vite配置tailwindcss

安装

npm install autoprefixer tailwindcss @uni-helper/vite-plugin-uni-tailwind -D
  • autoprefixer :自动管理浏览器前缀的插件,可以解析css文件并且添加前缀到css内容里。
  • @uni-helper/vite-plugin-uni-tailwind: 将 Tailwind CSS 框架集成到使用 Vite 作为构建工具的 UniApp 项目中

我的版本
在这里插入图片描述

修改配置文件

tailwind.config.ts

module.exports = {content: ["index.html", "./src/**/*.{html,js,ts,vue}"],theme: {extend: {},},plugins: [],
};

postcss.config.ts

module.exports = {plugins: {tailwindcss: {},autoprefixer: {},}
}

vite.config.ts

import tailwindcss from "tailwindcss";
import uniTailwind from "@uni-helper/vite-plugin-uni-tailwind";
export default defineConfig({plugins: [uni(), uniTailwind()],css: {postcss: {plugins: [tailwindcss()],},},
});

引入tailwindcss 指令

在src目录下新建assets目录,新建tailwind.css 文件

@tailwind base;
@tailwind components;
@tailwind utilities;

在这里插入图片描述
在App.vue中引入
在这里插入图片描述

测试

<view class="bg-black text-orange-500"><text>1</text><text>2</text>
</view>

在这里插入图片描述

总结

  • 报错的时候先去官网看案例,查博客版本依赖不一样可能会被带偏;

相关文章:

【uniapp】vue3+vite配置tailwindcss

安装 npm install autoprefixer tailwindcss uni-helper/vite-plugin-uni-tailwind -Dautoprefixer &#xff1a;自动管理浏览器前缀的插件&#xff0c;可以解析css文件并且添加前缀到css内容里。uni-helper/vite-plugin-uni-tailwind: 将 Tailwind CSS 框架集成到使用 Vite 作…...

从源码到应用:医疗陪诊系统与在线问诊小程序开发详解

在数字化医疗时代&#xff0c;医疗陪诊系统与在线问诊小程序的开发成为了医疗机构和技术公司关注的焦点。接下来&#xff0c;小编将与您一同深入了解。 一、医疗陪诊系统的核心功能 医疗陪诊系统旨在为患者提供更贴心的医疗服务&#xff0c;通过专业人员陪同患者完成就医过程。…...

mysql数据库中decimal数据类型比较大小

在MySQL中&#xff0c;DECIMAL数据类型用于存储精确的数值&#xff0c;它非常适合用于需要高精度计算的场景&#xff0c;如金融应用。当我们需要在MySQL数据库中比较DECIMAL类型数据的大小时&#xff0c;可以使用标准的比较运算符&#xff0c;如>, <, >, <, 和 &l…...

掌控库存,简化管理 — InvenTree 开源库存管理系统

InvenTree &#xff1a;简化您的库存管理&#xff0c;让效率和控制力触手可及。- 精选真开源&#xff0c;释放新价值。 概览 InvenTree&#xff0c;一款专为精细化库存管理而设计的开源系统&#xff0c;以其高效和灵活性在众多库存管理工具中脱颖而出。它以Python和Django框架…...

Linux---项目自动化构建工具-make/Makefile

一、背景 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的 规则来指定&#xff0c;哪些文件需要先编译&#xff0c;哪些文件…...

嘉立创EDA个人学习笔记1(PCB板介绍)

前言 本篇文章属于嘉立创EDA的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 嘉立创EDA-PCB设计零基础入门课程&#xff08;54集全&#xff09;_…...

(转)Restful接口设计(1)

.representational&#xff1a;代表性的 URI&#xff08;Universal Resouce Identifier&#xff09;&#xff1a;Universal &#xff1a;普遍的;共同的。Identifier&#xff1a;标识符。统一资源标识符。 31-RESTful接口介绍-02_哔哩哔哩_bilibili 31-RESTful接口介绍-03_哔哩…...

Python进阶之3D图形

Python进阶之3D图形 在数据可视化中&#xff0c;2D图形通常可以满足大多数需求。然而&#xff0c;对于一些复杂的数据或分析&#xff0c;3D图形可以提供更多的视角和洞察。在Python中&#xff0c;使用 Matplotlib 和 Plotly 等库可以轻松创建各种3D图形。本文将介绍如何使用这…...

机器学习深度学习中的搜索算法浅谈

机器学习&深度学习中的搜索算法浅谈 搜索算法是计算机科学中的核心算法&#xff0c;用于在各种数据结构&#xff08;如数组、列表、树、图等&#xff09;中查找特定元素或信息。这些算法不仅在理论上具有重要意义&#xff0c;还在实际应用中扮演着关键角色。本文将详细探讨…...

基于IMX8M_plus+FPGA+AI监护仪解决方案

监护仪是一种以测量和控制病人生理参数&#xff0c;并可与已知设定值进行比较&#xff0c;如果出现超标可发出警报的装置或系统。 &#xff08;1&#xff09;监护仪主要采集测量人体生理参数&#xff0c;心电、血压、血氧、体温等需要采集处理大量的数据&#xff0c;系统需要多…...

仿RabbitMq实现简易消息队列正式篇(路由匹配篇)

TOC 目录 路由匹配模块 代码展示 路由匹配模块 决定了一条消息是否能够发布到指定的队列 在每个队列根交换机的绑定信息中&#xff0c;都有一个binding_key&#xff08;在虚拟机篇有说到&#xff09;这是队列发布的匹配规则 在每条要发布的消息中&#xff0c;都有一个rout…...

一套完整的NVR网络硬盘录像机解决方案和NVR程序源码介绍

随着网络技术的发展&#xff0c;视频数据存储的需求激增&#xff0c;促使硬盘录像机&#xff08;DVR&#xff09;逐渐演变为具备网络功能的网络视频录像机&#xff08;NVR&#xff09;。NVR&#xff0c;即网络视频录像机&#xff0c;负责网络视音频信号的接入、存储、转发、解码…...

2024年人工智能固态硬盘采购容量预计超过45 EB

根据TrendForce发布的最新市场报告&#xff0c;人工智能&#xff08;AI&#xff09;服务器客户在过去两个季度显著增加了对企业级固态硬盘&#xff08;SSD&#xff09;的订单。为了满足AI应用中不断增长的SSD需求&#xff0c;上游供应商正在加速工艺升级&#xff0c;并计划在20…...

Java的反射原理

反射允许程序在运行时检查或修改其类、接口、字段和方法的行为。反射主要通过java.lang.reflect包中的类和接口实现&#xff0c;它主要用于以下目的&#xff1a; 在运行时分析类的能力&#xff1a;通过反射&#xff0c;可以在运行时检查类的结构&#xff0c;比如它的方法、构造…...

vue.config.js 配置

vue.config.js 文件是 Vue CLI 项目中的全局配置文件&#xff0c;它允许你以 JavaScript 的形式来配置构建选项&#xff0c;而不是通过命令行参数或者 .vue-clirc 的 JSON 格式。 官方文档: https://cli.vuejs.org/zh/config/#全局-cli-配置 基础配置 publicPath 设置构建好的…...

C ++ 也可以搭建Web?高性能的 C++ Web 开发框架 CPPCMS + MySQL 实现快速入门案例

什么是CPPCMS&#xff1f; CppCMS 是一个高性能的 C Web 开发框架&#xff0c;专为构建快速、动态的网页应用而设计&#xff0c;特别适合高并发和低延迟的场景。其设计理念类似于 Python 的 Django 或 Ruby on Rails&#xff0c;但针对 C 提供了更细粒度的控制和更高效的性能。…...

Taos 常用命令工作笔记(二)

最近测试创建一个涛思的数据库和一堆表进行测试&#xff0c;通过json配置文件配置字段的类型、名称等&#xff0c;程序通过解析json文件的配置&#xff0c;动态创建数据库的表。 其中表字段为驼峰结构的规则命名&#xff0c;创建表也是成功的&#xff0c;插入的测试数据也是成功…...

idea安装二进制文本阅读插件

引言 在软件开发过程中&#xff0c;有时需要查看二进制文件的内容以调试或分析问题。虽然有许多专用工具可以处理这类任务&#xff0c;但直接在 IDE 内集成这些功能无疑更加方便高效。本文将介绍如何在 IntelliJ IDEA 2023中安装和配置一个名为 BinEd的插件&#xff0c;以及如…...

MySQL 常用 SQL 语句大全

1. 基本查询 查询所有记录和字段 SELECT * FROM table_name; 查询特定字段 SELECT column1, column2 FROM table_name; 查询并限制结果 SELECT column1, column2 FROM table_name LIMIT 10; 条件查询 SELECT column1, column2 FROM table_name WHERE condition; 模糊匹…...

[Spring] Spring事务与事务的传播

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...