unocss和tailwindcss css原子引擎

第一种tailwindcss:

tailwindcss官网
https://tailwindcss.com/docs/grid-column
在这里插入图片描述

基本介绍及优点分析

Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站

在这里插入图片描述

PostCss 处理 Tailwind Css 基本流程

PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网
在这里插入图片描述

在 vscode 中,安装 Tailwind Css 插件,增加代码提示

初始化项目

npm init vue@latest

安装 Tailwind Css

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

执行命令,生成两个配置文件

  • postcss.config.js
  • tailwind.config.js

npx tailwindcss init -p

配置文档参考:配置 - Tailwind CSS 中文文档

修改配置文件 tailwind.config.js

2.6


module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],

**```
3.0版本**

```cpp

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

创建 index.css,并在 main.ts 中引入

创建 index.css

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

第二种unocss

unocss官网
https://unocss.dev/config/rules
在这里插入图片描述
unocss:最好配合vite去构建文件
操作搜索页面:
在这里插入图片描述

在这里插入图片描述

unocss 原子化

重新构想原子化CSS - 知乎
在这里插入图片描述

unocss 原子化参考资料

由于个人感觉此模块在实际项目中应用很少,所以不做记录,但是为了以防万一,先记下来之前看过的文章及视频,讲的非常清晰,给大佬点赞~~
小满Vue3(第三十七章 unoCss原子化)_哔哩哔哩_bilibili
小满Vue3第三十七章(unocss原子化)_小满zs的博客-CSDN博客
在这里插入图片描述

unocss配置(案例)

安装依赖

npm i --save unocss,@unocss/reset

mian.ts中引入
import '@unocss/reset/tailwind.css' //初始化css
import 'uno.css'//引入unocss
新建unocss.config.ts

可 查看配置文档
在这里插入图片描述

import {
  defineConfig,
  presetAttributify,
  presetUno,
  presetIcons,
} from "unocss";
export default defineConfig({
  //预设:m-3 p-3
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({ scale: 1.2, warn: true }),
  ],
  //快捷方式
  shortcuts: [
    ["wh-full", "w-full h-full"],
    ["f-c-c", "flex justify-center items-center"],
    ["flex-col", "flex flex-col"],
    ["text-ellipsis", "truncate"],
    [
      "icon-btn",
      "text-16 inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-primary !outline-none",
    ],
  ],
  //正则
  rules: [
    [/^bc-(.+)$/, ([, color]) => ({ "border-color": `#${color}` })],
    [
      "card-shadow",
      {
        "box-shadow":
          "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
      },
    ],
  ],
  theme: {
    colors: { primary: "var(--primary-color)", dark_bg: "var(--dark-bg)" },
  },
});
vite.config.ts中注入
import unocss from 'unocss/vite'
 
plugins: [unocss(),react()]//unocss一定要放react之前
处理unocss写入标签报错

src目录下新建 html.d.ts

//react
import type {AttributifyAttributes} from '@unocss/preset-attributify'
declare module "react"{
    interface HTMLAttributes<T> extends AttributifyAttributes {}//tsx标签写uno不报错
}
//vue
import type {AttributifyAttributes} from '@unocss/preset-attributify'
declare module "@vue/runtime-dom"{
    interface HTMLAttributes extends AttributifyAttributes {}//tsx标签写uno不报错
}

在这里插入图片描述
unocss的插件

配置2(案例)

在这里插入图片描述
在这里插入图片描述

unocss配置
Vue3 学习笔记 —— scoped、tailwind、unocss 原子化、Vue3 样式新特性
重新构想原子化CSS

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java基础 集合2

前9点&#xff0c;在另一篇作品中&#xff0c;可以从集合1开始观看 9.List遍历方式&#xff1a; 10.Arraylist底层原理&#xff1a; 11.Linklist底层原理&#xff1a; 1.LinkedList做队列和栈&#xff1a; package day01;import java.util.ArrayList; import java.util.I…

深度学习与计算机视觉(一)

文章目录 计算机视觉与图像处理的区别人工神经元感知机 - 分类任务Sigmoid神经元/对数几率回归对数损失/交叉熵损失函数梯度下降法- 极小化对数损失函数线性神经元/线性回归均方差损失函数-线性回归常用损失函数使用梯度下降法训练线性回归模型线性分类器多分类器的决策面 soft…

Hadoop、Hive安装

一、 工具 Linux系统&#xff1a;Centos&#xff0c;版本7.0及以上 JDK&#xff1a;jdk1.8 Hadoop&#xff1a;3.1.3 Hive&#xff1a;3.1.2 虚拟机&#xff1a;VMware mysql&#xff1a;5.7.11 工具下载地址: https://pan.baidu.com/s/1JYtUVf2aYl5–i7xO6LOAQ 提取码: xavd…

项目经验分享|openGauss 陈贤文:受益于开源,回馈于开源

开源之夏 项目经验分享 2023 #08 # 关于 openGauss 社区 openGauss是一款开源关系型数据库管理系统&#xff0c;采用木兰宽松许可证v2发行。openGauss内核深度融合华为在数据库领域多年的经验&#xff0c;结合企业级场景需求&#xff0c;持续构建竞争力特性。同时openGauss也是…

基于FPGA的图像PSNR质量评估计算实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 设置较大的干扰&#xff0c;PSNR15。 设置较小的干扰&#xff0c;PSNR25。 2.算法运行软件版本 matlab2022a vivado2019.2 3.部分核心程序 ti…

如何在Postman中使用静态HTTP

首先&#xff0c;打开 Postman 软件。在 Postman 的菜单栏中&#xff0c;点击 “Preferences”&#xff08;偏好设置&#xff09;。 亲身经验&#xff1a;我自己尝试了这个方法&#xff0c;发现它非常适用于需要使用HTTP的场景。 数据和引证&#xff1a;根据 Postman 官方文档…

皮卡丘RCE靶场通关攻略

皮卡丘RCE靶场通关攻略 文章目录 皮卡丘RCE靶场通关攻略RCE(remote command/code execute)概述远程系统命令执行启动环境漏洞练习第一关exec "ping"第二关 exec "eval" RCE(remote command/code execute)概述 RCE漏洞&#xff0c;可以让攻击者直接向后台服…

Maven第三章:IDEA集成与常见问题

Maven第三章:IDEA集成与常见问题 前言 本章内容重点:了解如何将Maven集成到IDE(如IntelliJ IDEA或Eclipse)中,以及使用过程中遇到的常见的问题、如何解决,如何避免等,可以大大提高开发效率。 IEAD导入Maven项目 File ->Open 选择上一章创建的Maven项目 my-app查看po…

Linux学习第24天:Linux 阻塞和非阻塞 IO 实验(一): 挂起

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 在正式开始今天的笔记之前谈一下工作中遇见的一个问题。 本篇笔记主要学习Linux 阻塞和非阻塞 IO 实验&#xff0c;主要包括阻塞和非阻塞简介、等待队列、轮询、…

威联通NAS进阶玩法之使用Docker搭建个人博客教程

Hello大家好&#xff0c;本篇教程主要教大家在威联通的NAS上搭建属于自己的个人博客网站&#xff0c;首先介绍一下我使用的机器&#xff0c;四盘位威联通TS-464C2&#xff0c;搭载四核四线程的N5095处理器&#xff0c;支持4K60帧的输出以及PCIE3.0,可玩性还是非常高的。废话不多…

24 行为型模式-访问者模式

1 访问者模式介绍 访问者模式在实际开发中使用的非常少,因为它比较难以实现并且应用该模式肯能会导致代码的可读性变差,可维护性变差,在没有特别必要的情况下,不建议使用访问者模式。 2 访问者模式原理 3 访问者模式实现 我们以超市购物为例,假设超市中的三类商品: 水果,糖…

本地websocket服务端暴露至公网访问【内网穿透】

本地websocket服务端暴露至公网访问【cpolar内网穿透】 文章目录 本地websocket服务端暴露至公网访问【cpolar内网穿透】1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功…

QGIS008:QGIS拓扑检查、修改及验证

摘要&#xff1a;本文介绍使用QGIS拓扑检查器和几何图形检查器检查图层的拓扑错误&#xff0c;修改拓扑错误&#xff0c;并对修改后的图层进行错误验证。 实验数据&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Vy2s-KYS-XJevqHNdavv9A?pwdf06o 提取码&#xff1a…

nginx配置反向代理和动静分离应用

一. Nginx配置反向代理和实现动静分离与虚拟主机流程图&#xff1a; 二 .Nginx配置反向代理和实现动静分离与虚拟主机实现详细配置和效果图 2.1 nginx 配置反向代理 #在nginx.conf配置server同级下配置 include tomcat.conf# vim tomcat.conf upstream api.z.mukewang.com{…

线程安全问题

线程安全 简单来说&#xff0c;在多个线程访问某个方法或者对象的时候&#xff0c;不管通过任何的方式调用以及线程如何去交替执行。在程序中不做任何同步干预操作的情况下&#xff0c;这个方法或者对象的执行/修改都能按照预期的结果来反馈&#xff0c;那么这个类就是线程安全…

基于XML的Web服务Java接口(JAX-WS)、Jakarta XML Web Services Eclipse 实现

简介 JAX-WS&#xff08;Java API for XML-Based Web Services&#xff09;&#xff0c;是创建web服务的Java编程接口&#xff0c;特别是SOAP服务。是Java XML编程接口之一&#xff0c;是Java SE 和Java EE 平台的一部分。 JAX-WS 2.0 规范是代替JAX-RPC 1.0的下一代Web服务AP…

前端知识储备

前端知识储备 一. 什么是前端? """ 任何与用户直接打交道的操作界面都可以称之为前端 比如:电脑界面 手机界面 平板界面什么是后端后端类似于幕后操作者(一堆让人头皮发麻的代码)不直接跟用户打交道 """ 二. 为什么学前端? ""&quo…

Vue进阶(幺陆玖)项目部署后IE报 SCRIPT1002:语法错误 解决方案探讨

文章目录 一、前言二、组件懒加载2.1 什么是懒加载2.2 如何实现懒加载 三、延伸阅读 软件程序唤醒3.1 protocolCheck 实现3.2 自定义实现 四、拓展阅读 一、前言 Vue项目改造升级后&#xff0c;原本本地热部署后IE可正常打开的项目出现页面白屏且控制台给出SCRIPT1002:语法错误…

服务器执行命令或脚本的两种方式

目录 1、通过Runtime 2、通过ProcessBuilder 在java开发中&#xff0c;有时候需要与操作系统的命令行交互&#xff0c;执行特定的CMD命令或脚本。 我们有如下两种方式来实现: Java的Runtime类和ProcessBuilder类都允许Java程序启动一个新的进程并执行特定的命令&#xff0…

[数据结构]-二叉搜索树

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正。 目录 一、二叉搜…