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

tailwindcss学习02

vue中接入tailwindcss

使用cmd不要使用powershell

npm create vite@latest stu02 -- --template vue
cd stu02npm install --registry http://registry.npm.taobao.org
npm install -D tailwindcss@3.4.17 postcss autoprefixer --registry http://registry.npm.taobao.org
npx tailwindcss init -p
# 展示全部配置
# npx tailwindcss init -p -full

修改tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

修改style.css

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

运行项目

npm run dev

修改App.vue

<script setup>
</script><template><h1 class="text-3xl font-bold underline">Hello world!</h1>
</template><style scoped></style>

结果
在这里插入图片描述

参考

https://www.tailwindcss.cn/docs/guides/vite#vue

相关文章:

tailwindcss学习02

vue中接入tailwindcss 使用cmd不要使用powershell npm create vitelatest stu02 -- --template vue cd stu02npm install --registry http://registry.npm.taobao.org npm install -D tailwindcss3.4.17 postcss autoprefixer --registry http://registry.npm.taobao.org npx t…...

千峰React:脚手架准备+JSX基础

组件化->封装性 React提供函数组件实现组件化 React和传统JS的区别就是JS需要手动管理DOM操作&#xff0c;React: 采用组件化开发&#xff0c;通过虚拟DOM提升性能。 MVC 是一种软件设计模式&#xff0c;全称为 Model-View-Controller&#xff08;模型-视图-控制器&#x…...

【算法】快排

题目 快排 思路 如果输入为0或1直接返回&#xff1b;否则取一个基准值&#xff0c;可以取中间位置&#xff0c;如果输入是有序的可以避免时间过长&#xff0c;然后移动指针&#xff0c;先让i指针右移&#xff0c;如果小于基准值就继续右移&#xff0c;j指针左移同理。如果指…...

开放签电子签章工具版 2.0 正式发布,构建全场景电子签约能力、满足复杂的签章管理场景

根据近半年开源用户和市场需求反馈&#xff0c;开放签团队推出电子签章工具版2.0版本&#xff0c;主要解决复杂的签约流程集成和电子印章授权管理场景。以API接口对外提供服务和配置一套可视化后台管理系统&#xff0c;可与业务系统无缝集成&#xff0c;用户使用起来毫无“违和…...

python和pycharm 和Anaconda的关系

好的&#xff0c;下面我会详细说明 Python、PyCharm 和 Anaconda 三者的关系&#xff0c;并逐一解释它们的功能和作用。 1. Python&#xff08;编程语言&#xff09; 定义&#xff1a;Python 是一种高级编程语言&#xff0c;设计简洁&#xff0c;易于学习&#xff0c;且功能强…...

DeepSeek V3和R1

DeepSeek V3 和 R1 是深度求索&#xff08;DeepSeek&#xff09;推出的两款大模型&#xff0c;基于混合专家架构&#xff08;MoE&#xff09;&#xff0c;但在设计目标、训练方法和应用场景上存在显著差异。以下是两者的详细对比与补充内容&#xff1a; DeepSeek V3和R1 一、模…...

JavaScript数组-获取数组中的元素

在JavaScript中&#xff0c;数组是一种非常实用的数据结构&#xff0c;它允许我们将多个值存储在一个单独的变量中。无论是数字、字符串还是对象&#xff0c;都可以作为数组的元素。获取数组中的特定元素是操作数组的基础技能之一。本文将详细介绍如何在JavaScript中获取数组中…...

SSE:用于流式传输的协议

一.什么是SSE SSE协议是一种基于http协议的单向通信协议&#xff0c;服务端可以向客户端发送数据&#xff0c;但是客户端不能向服务器发送数据。客户端通过创建一个到服务器的单向连接来监听事件。可以将一次性返回数据包改为流式返回数据。SSE协议支持断线重连&#xff0c;也支…...

Aseprite详细使用教程(7)——切片工具

1.名词解释 快捷键&#xff1a;ShiftC 切片工具功能&#xff08;了解即可&#xff09;&#xff1a; &#xff08;1&#xff09;优化资源加载: 将较大的图像切成多个较小的切片&#xff0c;可减小单个文件大小&#xff0c;在网页或游戏等场景中&#xff0c;能显著提升加载速度…...

航空公司客户价值分析

目录 1 目的 2 方法 3 源代码 4 结果 5 扩展 1 目的 ①借助航空公司客户数据&#xff0c;对客户进行分类&#xff1b; ②对不同的客户类别进行特征分析&#xff0c;比较不同类别的客户的价值&#xff1b; ③针对不同价值的客户类别制定相应的营销策略&#xff0c;为其提供个性…...

基于开源Odoo、SKF Phoenix API与IMAX-8数采网关的圆织机设备智慧运维实施方案 ——以某纺织集团圆织机设备管理场景为例

一、方案背景与需求分析 1.1 纺织行业设备管理痛点 以某华东地区大型纺织集团为例&#xff0c;其圆织机设备管理面临以下挑战&#xff1a; 非计划停机损失高&#xff1a;圆织机主轴轴承故障频发&#xff0c;2024年单次停机损失达12万元&#xff08;停机8小时导致订单延误&am…...

LLM 架构

LLM 分类 : 自编码模型 (encoder) : 代表模型 : BERT自回归模型 (decoder) : 代表模型 : GPT序列到序列模型 (encoder-decoder) : 代表模型 : T5 自编码模型 (AutoEncoder model , AE) 代表模型 : BERT (Bidirectional Encoder Representation from Transformers)特点 : Enc…...

Word Embeddings

Count-based Approach Term-document matrix: Document vectors Two ways to extract information from the matrix: Column-wise: a document is represented by a |V|-dim vector (V: vocabulary) Widely used in information retrieval: find similar documents 查找類似…...

相机开发调中广角和焦距有什么不一样

在相机中,调整广角和调整焦距是两个不同的概念,它们的作用和实现方式也不同。以下是两者的详细对比和解释: 1. 调整广角 定义 广角是指相机的视野范围(Field of View, FOV)。调整广角实际上是调整相机的视野范围。更广的视野意味着可以捕捉到更多的场景内容(更宽的画面)…...

krpano学习笔记,端口修改,krpano二次开发文档,krpano三维div信息展示,krpano热点显示文字

一、修改krpano端口 .\tour_testingserver -port8085 &#xff0c;修改端口&#xff0c;指定启动时的端口 二、给krpano添加div展示信息 和场景一起转动&#xff0c;不是layer&#xff0c;layer是固定的&#xff0c;没啥用。 主要是onloaded里面的1个方法。 <action name…...

Jenkins 给任务分配 节点(Node)、设置工作空间目录

Jenkins 给任务分配 节点(Node)、设置工作空间目录 创建 Freestyle project 类型 任务 任务配置 Node 打开任务-> Configure-> General 勾选 Restrict where this project can be run Label Expression 填写一个 Node 的 Label&#xff0c;输入有效的 Label名字&#x…...

深入解析iOS视频录制(二):自定义UI的实现

深入解析 iOS 视频录制&#xff08;一&#xff09;&#xff1a;录制管理核心MWRecordingController 类的设计与实现 深入解析iOS视频录制&#xff08;二&#xff09;&#xff1a;自定义UI的实现​​​​​​​ 深入解析 iOS 视频录制&#xff08;三&#xff09;&#xff1a;完…...

跳表的C语言实现

跳表&#xff08;Skip List&#xff09;是一种基于链表的动态数据结构&#xff0c;用于实现高效的查找、插入和删除操作。它通过引入多级索引来加速查找过程&#xff0c;类似于多级索引的有序链表。跳表的平均时间复杂度为 O(logn)&#xff0c;在某些场景下可以替代平衡树。 以…...

Java Web开发实战与项目——Spring Security与权限管理实现

Web应用中&#xff0c;权限管理是系统安全的核心部分&#xff0c;确保用户只能访问他们被授权的资源。Spring Security是Spring框架中的一个安全框架&#xff0c;它提供了强大的认证和授权功能&#xff0c;用于实现用户认证和权限控制。本章节将详细讲解如何使用Spring Securit…...

单元测试方法的使用

import java.util.Date; import org.junit.Test; /** java中的JUnit单元测试* * 步骤:* 1.选中当前项目工程 --》 右键:build path --》 add libraries --》 JUnit 4 --》 下一步* 2.创建一个Java类进行单元测试。* 此时的Java类要求:①此类是公共的 ②此类提供一个公共的无参…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

react-pdf(pdfjs-dist)如何兼容老浏览器(chrome 49)

之前都是使用react-pdf来渲染pdf文件&#xff0c;这次有个需求是要兼容xp环境&#xff0c;xp上chrome最高支持到49&#xff0c;虽然说iframe或者embed都可以实现预览pdf&#xff0c;但为了后续的定制化需求&#xff0c;还是需要使用js库来渲染。 chrome 49测试环境 能用的测试…...

Java + Spring Boot + Mybatis 插入数据后,获取自增 id 的方法

在 MyBatis 中使用 useGeneratedKeys"true" 获取新插入记录的自增 ID 值&#xff0c;可通过以下步骤实现&#xff1a; 1. 配置 Mapper XML 在插入语句的 <insert> 标签中设置&#xff1a; xml 复制 下载 运行 <insert id"insertUser" para…...

leetcode.多数元素

169. 多数元素 - 力扣&#xff08;LeetCode&#xff09; import java.util.HashMap;public class LeetCode169 {public int majorityElement(int[] nums) {int count nums.length;int res count/2;Scanner scanner new Scanner(System.in);HashMap<Integer,Integer> …...

【Redis】数据库与缓存一致性

目录 1、背景2、核心问题3、常见解决方案【1】缓存更新策略[1]旁路缓存模式&#xff08;Cache-Aside&#xff09;[2]写穿透模式&#xff08;Write-Through&#xff09;[3]写回模式 【2】删除与更新策略[1]先更新数据库再删除缓存[2]先删除缓存再更新数据库 【3】一致性保障机制…...

uniapp+<script setup lang=“ts“>解决有数据与暂无数据切换显示,有数据加载时暂无数据闪现(先加载空数据)问题

声明showEmpty 为false&#xff0c;在接口返回处判断有数据时设置showEmpty 为false&#xff0c;接口返回数据为空则判断showEmpty 为true &#xff08;这样就解决有数据的时候会闪现暂无数据的问题啦&#xff09; <!--* Date: 2024-02-26 03:38:52* LastEditTime: 2025-06…...