当前位置: 首页 > 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类要求:①此类是公共的 ②此类提供一个公共的无参…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

小智AI+MCP

什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析&#xff1a;AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github&#xff1a;https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...

Linux信号保存与处理机制详解

Linux信号的保存与处理涉及多个关键机制&#xff0c;以下是详细的总结&#xff1a; 1. 信号的保存 进程描述符&#xff08;task_struct&#xff09;&#xff1a;每个进程的PCB中包含信号相关信息。 pending信号集&#xff1a;记录已到达但未处理的信号&#xff08;未决信号&a…...

第21节 Node.js 多进程

Node.js本身是以单线程的模式运行的&#xff0c;但它使用的是事件驱动来处理并发&#xff0c;这样有助于我们在多核 cpu 的系统上创建多个子进程&#xff0c;从而提高性能。 每个子进程总是带有三个流对象&#xff1a;child.stdin, child.stdout和child.stderr。他们可能会共享…...