【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>

在这里插入图片描述

总结

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

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

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

相关文章

Cesium天空盒子(Skybox)制作(js代码)和显示

介绍 在Cesium中&#xff0c;星空背景是通过天空盒子方式&#xff08;6张图片&#xff09;来显示的&#xff0c;原生的图片分辨率太低&#xff0c;本项目用于生成天空盒子的6张图片。最终生成的6个图片大小约为500kb(每个)&#xff0c;格式为jpg&#xff0c;总共的恒星数目约为…

最新保姆级Anaconda和Pycharm安装激活过程(2024最新版本)

Anaconda和Pycharm安装过程 Anaconda安装过程第一步第二步第三步第四步第五步第六步第七步第八步第九步Pycharm 安装过程&#xff1a;第一步第二步第三步第四步第五步第六步---激活过程第七步第八步第九步第十步第十一步第十二步第十三步第十四步Anaconda和Pycharm软件百度网盘…

Video视频抽帧和WebCodecs API视频抽帧介绍

目录 mp4Box抽帧 ffmpeg抽帧 video元素抽帧 WebCodecs 核心API 视频文件是一个容器&#xff0c;里面有很多不同的轨道信息。如&#xff1a;图像、声音、字幕等。而视频图像信息又是由一系列图片序列帧的集合。如10秒时长的视频&#xff0c;假设每秒30帧。那大概有300条图像…

大公报发表欧科云链署名文章:发行港元稳定币,建Web3.0新生态

欧科云链研究院资深研究员蒋照生近日与香港科技大学副校长兼香港Web3.0协会首席科学顾问汪扬、零壹智库创始人兼CEO柏亮&#xff0c;在大公报发布联合署名文章 ——《Web3.0洞察 / 发行港元稳定币&#xff0c;建Web3.0新生态》&#xff0c;引发市场广泛讨论。 文章就香港稳定币…

2024年【汽车驾驶员(技师)】考试报名及汽车驾驶员(技师)试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车驾驶员&#xff08;技师&#xff09;考试报名参考答案及汽车驾驶员&#xff08;技师&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及汽车驾驶员&#xff08;技师&#xff09;操作证已考过的学员汇总…

【二分查找】--- 初阶题目赏析

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 算法Joureny 上篇我们讲解了关于二分的朴素模板和边界模板&#xff0c;本篇博客我们试着运用这些模板。 &#x1f3e0; 搜索插入位置 &#x1f4cc; 题目…

【RISC-V设计-12】- RISC-V处理器设计K0A之验证环境

【RISC-V设计-12】- RISC-V处理器设计K0A之验证环境 文章目录 【RISC-V设计-12】- RISC-V处理器设计K0A之验证环境1.简介2.验证顶层3.顶层代码4.模型结构4.1 地址映射4.2 特殊功能寄存器 5.模型代码6.运行脚本7.总结 1.简介 在前几篇文章中&#xff0c;分别介绍了各个模块的设…

VM下kali设置桥接网络

一、查看主机ip 1.winr输入cmd 2.进入终端输入ipconfig 3.查看ip 二、虚拟机网络设置 1.进入vm的虚拟网络编辑器 2.桥接网卡自己选&#xff0c;1是有线网卡2是无线网卡&#xff0c;选择记得点应用 3.虚拟机的网络适配器也要选择桥接模式 三、kali网络配置 1.打开kali终端编辑文…

【经典算法】BFS_最短路问题

1. 最短路问题介绍 最短路径问题是图论中的一类十分重要的问题。本篇文章只介绍边权为1(或边权相同)的最简单的最短路径问题。所谓边权&#xff0c;就是两点之间的距离。 这类问题通俗的说就是告诉你起点和终点&#xff0c;要你找出最短的路径或是最短路径是多少。 解决方法&…

精通C++ STL(五):list的介绍及使用

目录 ​编辑 list的介绍 list的使用 list的定义方式 list的插入和删除 push_front和pop_front push_back和pop_back insert erase list的迭代器使用 begin和end rbegin和rend list的元素获取 front和back list的大小控制 size resize empty clear list的操作函数 sort splic…

水利机械5G智能制造工厂物联数字孪生平台,推进制造业数字化转型

在当今这个科技日新月异的时代&#xff0c;水利机械行业正经历着一场深刻的变革&#xff0c;其中5G智能制造工厂物联数字孪生平台的引入&#xff0c;无疑是推动制造业数字化转型的重要驱动力。工业物联数字孪生平台是智能制造工厂的核心组成部分&#xff0c;它基于物理世界的真…

【项目】基于Vue2+Router+Vant 前端面经项目

环境配置 Vue脚手架的创建 在终端中打开输入 vue create 项目包名 -m npm注意⚠️&#xff1a;项目名称不再允许包含大写字母。 选择第三项 3.选择要安装的模块 从上到下的功能模块&#xff1a; Babel - ES&#xff1a;降级处理Router-Vue&#xff1a;路由插件CSS预处理器E…

仿Muduo库实现高并发服务器——Buffer模块

Buffer模块建议描述图。 关于Buffer模块主要就是信息的读取写入。 这个模块在Connect模块中使用&#xff0c;作为输入输出缓冲区进行使用。 以下是这个模块在本项目中的作用。 写入&#xff1a; 涉及到是否有足够大小的存储空间。 //确保可写空间足够&#xff08;整体空闲空间…

FASTSPEECH 2论文阅读

FASTSPEECH 2: FAST AND HIGH-QUALITY END-TOEND TEXT TO SPEECH 现状 非自回归模型可以在质量相当的情况下显著快于先前的自回归模型合成模型。但FastSpeech模型训练依赖与自回归教师模型进行时长预测&#xff08;提供更多的信息作为输入&#xff09;和知识蒸馏&#xff08;…

SEREN赛恩电源RX01/LX01系列射频手侧

SEREN赛恩电源RX01/LX01系列射频手侧

C:数组传参的本质

1、一维数组传参的本质 数组传参是指在函数调用时将数组作为参数传递给函数。 int main() {int arr[10] { 1,2,3,4,5,6,7,8,9,10 };test(arr);return 0;}数组传参只需要写数组名就可以了。注意&#xff1a;数组名是arr&#xff0c;而不是arr[10] 数组传参形参该怎么写呢&am…

Golang Map 深度剖析:原理、实践与面试要点

嘿,小伙伴们!我是 k 哥。今天,咱们来聊聊 Map 。 在 Go 语言这个神奇的世界里,Map 这个有点神秘的数据结构一直都是开发者们特别关注的。 你是不是在用 Map 的时候,对它里面咋工作的感到好奇?是不是碰到复杂操作的时候,特别想弄明白它背后的原理?别着急,今天这篇文章…

【计算机网络】应用层自定义协议与序列化

记得在上一节我们说过TCP中的读取时需要改进&#xff0c;这节就可以解决读取问题了。 目录 应用层再谈 "协议"网络版计算机方案一方案二 序列化 和 反序列化 重新理解 read、write、recv、send 和 tcp 为什么支持全双工 应用层 再谈 “协议” 我们在UDP与TCP中写的…

支持I2C接口、抗干扰性强、14通道触摸按键的电容式触摸芯片-GTX314L

电容式触摸芯片 - GTX314L是具有多通道触发传感器的14位触摸传感器系列&#xff0c;它是通过持续模式提供中断功能和唤醒功能&#xff0c;广泛适用于各种控制面板应用&#xff0c;可直接兼容原机械式轻触按键的处理信号。 GTX314L芯片内部采用特殊的集成电路&#xff0c;具有高…