三合一网站模板/百度官网网站
本文博客链接 https://ysx.cosine.ren/tailwind-update-v4-migrate
自用小记。
Tailwind CSS v4.0 - Tailwind CSS
- 新的高性能引擎 - 完整构建的速度速度快 5 倍,增量构建的速度快于 100 倍以上 —— 以微秒为单位进行测量。
- 为现代 Web 设计 - 建立在前沿的 CSS 特性之上,使用级联层、
@property
和color-mix()
等前沿 CSS 特性注册自定义属性。 - 简化的安装 - 较少的依赖项,零配置,只需要 CSS 文件中的一行代码。
- 第一方 Vite 插件 - 紧密集成,可实现最高性能和最低配置。
- 自动内容检测 - 所有模板文件都是自动发现的,无需配置。
- 内置导入支持 - 无需额外工具即可捆绑多个 CSS 文件。
- CSS-First 配置 - 重新设计的开发人员体验,您可以直接在 CSS 而不是 JavaScript 配置文件中自定义和扩展框架。
- CSS 主题变量 - 您的所有 design tokens 都以原生 CSS 变量的形式暴露,因此您可以在任何地方访问它们。
- 动态实用程序值和变体 - 不再需要猜测间距中存在哪些值,也不再需要为基本数据属性等扩展配置。
- 现代化的 P3 调色板 - 重新设计的更加生动的调色板,充分利用了现代展示技术。
- 容器查询 - 可使用容器查询根据容器大小为元素设计样式,不再需要插件
- 新的 3D 变换实用程序 - 直接在 HTML 中的 3D 空间中变换元素,添加了用于进行 3D 变换的 API,例如
rotate-x-*
,rotate-y-*
,scale-z-*
,translate-z-*
和更多。 - 扩展的梯度 API - 径向和圆锥梯度,插值模式等。现在,线性梯度将角度作为值支持,因此您可以使用
bg-linear-45
等实用程序以 45 度角创建梯度。将bg-gradient-*
重命名为bg-linear-*
- @starting-style support - 新的
starting
变体增加了对新的 CSS@starting-style
功能的支持,从而在首次显示元素时可以过渡元素属性: - not-* variant - 仅在元素不匹配另一个变体,自定义选择器或媒体或功能查询时样式。
- 甚至更多的新实用程序和变体,包括对
color-scheme
的支持,field-sizing
,复杂的阴影,inert
等。
更多新变体
- 新的
inset-shadow-*
和inset-ring-*
实用程序 - 使得在一个元素上最多可以堆叠四层盒子阴影。 - 新的
field-sizing
实用程序 - 用于自动化的文本列,而无需编写单行 JavaScript。- 使用
field-sizing-content
,允许表单控件根据内容调整其大小 - 使用
field-sizing-fixed
固定尺寸:
- 使用
- 新的
color-scheme
- 参考 使用 light-dark() 的 CSS 配色方案相关颜色 - 新的
font-stretch
实用程序 - 用于仔细调整支持不同宽度的可变字体。 - 新的
inert
变体 -inert
变体使您可以样式的元素标记为inert
属性,这对于添加视觉提示很有用,可以清楚地表明内容的各个部分不是交互式的。 - 新的
nth-*
变体 - 使用nth-*
和nth-last-*
变体来根据孩子在列表中的位置设置样式,您可以在默认情况下将您想要的任何数字传递给这些数字,并使用任意值对nth-[2n+1_of_li]
等更复杂的表达式使用任意值。 eg:nth-3:underline
nth-last-5:underline
nth-last-of-type-6:underline
- 有关可用伪类变体的完整列表,请参见伪类参考资料。
- 新的
in-*
变体 - 非常类似于group-*
,但无需group
类。in-*
变体响应任何父代的状态变化,所以如果你想要更精细的控制,就需要使用group
来代替。
- 支持
:popover-open
- 使用现有的open
式变体也针对 open popovers. - 新的后代变体- 用于造型所有后代元素,无论好坏。
- 与
*
一样,**
变体也可用于为元素的子元素设置样式。主要区别在于**
将对所有后代应用样式,而不仅仅是直接子代。当你将它与另一个变体结合使用,以缩小选择范围时,这一点尤其有用
- 与
迁移记录
对于现有项目,我们发布了一份全面的升级指南,并构建了一个自动升级工具,以尽快和无痛地使用最新版本。
一个小项目先试试水,执行自动化迁移指令。
npx @tailwindcss/upgrade@next
迁移输出如下
≈ tailwindcss v4.0.2
│ Searching for CSS files in the current directory and its subdirectories…
│ ↳ Linked `./tailwind.config.js` to `./src/styles/theme/shadcn.css`
│ Migrating JavaScript configuration files…
│ ↳ The configuration file at `./tailwind.config.js` could not be automatically migrated to the new CSS configuration format, so your CSS has been
│ updated to load your existing configuration file.
│ Migrating templates…
│ ↳ Migrated templates for configuration file: `./tailwind.config.js`
│ Migrating stylesheets…
│ ↳ Migrated stylesheet: `./src/styles/theme/shadcn.css`
│ Migrating PostCSS configuration…
│ ↳ Installed package: `@tailwindcss/postcss`
│ ↳ Removed package: `autoprefixer`
│ ↳ Removed package: `postcss-import`
│ ↳ Migrated PostCSS configuration: `./postcss.config.js`
│ Updating dependencies…
│ ↳ Updated package: `prettier-plugin-tailwindcss`
│ ↳ Updated package: `tailwindcss`
│ Verify the changes and commit them to your repository.
npm verb exit 0
npm info ok
可以看出自动完成了大部分工作,包括 flex-grow
-> grow
/ flex-shrink
-> shrink
等类名更新,这就是成功迁移了,嗯,貌似表面上没出什么意外,再试试另一个 astro 5.1 项目的升级,先莽一下更新脚本。
% sudo npx @tailwindcss/upgrade@next
npm verb cli /usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js
npm info using npm@10.5.0
npm info using node@v20.12.2
npm verb title npm exec @tailwindcss/upgrade@next
npm verb argv "exec" "--" "@tailwindcss/upgrade@next"
npm verb logfile logs-max:10 dir:/Users/cosine/.npm/_logs/2025-02-03T10_01_41_235Z-
npm verb logfile /Users/cosine/.npm/_logs/2025-02-03T10_01_41_235Z-debug-0.log
npm sill logfile start cleaning logs, removing 1 files
npm sill logfile done cleaning log files
npm http fetch GET 200 https://registry.npmjs.org/@tailwindcss%2fupgrade 489ms (cache updated)
≈ tailwindcss v4.0.2│ Searching for CSS files in the current directory and its subdirectories…│ ↳ Linked `./tailwind.config.mjs` to `./src/styles/global/tailwind.css`│ Migrating JavaScript configuration files…│ ↳ Could not load the configuration file: undefined is not a functionnpm verb exit 1
npm verb code 1
很好,报错 Could not load the configuration file: undefined is not a function
, 查了下是有插件不兼容。(Could not load the configuration file: v is not a function · tailwindlabs/tailwindcss · Discussion #15781 · GitHub)
看了一下之前迁移成功的项目里有这两个插件:tailwindcss-animate
和 @tailwindcss/typography
出问题的 astro 项目里多了一个 tailwind-clip-path
插件,注释后就正常执行了。
// tailwind.config.js
module.exports = {plugins: [require("@tailwindcss/container-queries"),require("tailwindcss-animate"),// require("tailwind-clip-path"),require("@tailwindcss/typography"),],
};
然后起一下试试:
> cos-space@0.0.1 dev /Users/cosine/Documents/Programming/cos-space
> astro devPackage subpath './nesting/index.js' is not defined by "exports" in /Users/cosine/Documents/Programming/cos-space/node_modules/.pnpm/@astrojs+tailwind@5.1.4_astro@5.1.1_@types+node@22.10.5_jiti@2.4.2_rollup@4.29.1_terser@5.37._5qh5alcn5ztelwntajptz64i4q/node_modules/tailwindcss/package.json imported from /Users/cosine/Documents/Programming/cos-space/node_modules/.pnpm/@astrojs+tailwind@5.1.4_astro@5.1.1_@types+node@22.10.5_jiti@2.4.2_rollup@4.29.1_terser@5.37._5qh5alcn5ztelwntajptz64i4q/node_modules/@astrojs/tailwind/dist/index.jsStack trace:at exportsNotFound (node:internal/modules/esm/resolve:304:10)at packageResolve (node:internal/modules/esm/resolve:837:14)at defaultResolve (node:internal/modules/esm/resolve:1157:11)at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)at ModuleLoader.import (node:internal/modules/esm/loader:322:34)ELIFECYCLE Command failed with exit code 1.
很好,我就知道 astro 里的没那么简单迁移,查一下 astro/packages/integrations/tailwind/CHANGELOG.md at main · withastro/astro · GitHub Tailwind CSS 现在提供了一个 Vite 插件,这是在 Astro 中使用 Tailwind 4 的首选方法。卸载原来的 @astrojs/tailwind
,然后按照 tailwind 文档进行手动安装。
嗯,还得升一下 astro 版本到 Astro 5.2 | Astro
npx @astrojs/upgrade
pnpm rm @astrojs/tailwind
pnpm i tailwindcss @tailwindcss/vite
成功啦,对比一下配置文件
diff --git a/astro.config.mjs b/astro.config.mjs
index bf8e9b1..20513bd 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,22 +1,17 @@// @ts-checkimport react from '@astrojs/react';
-import tailwind from '@astrojs/tailwind';import { siteConfig } from './src/constants/site-config';import icon from 'astro-icon';import { defineConfig } from 'astro/config';import svgr from 'vite-plugin-svgr';import umami from '@yeskunall/astro-umami';
+import tailwindcss from '@tailwindcss/vite';// https://astro.build/configexport default defineConfig({site: siteConfig.site,integrations: [react(),
- tailwind({
- // 允许在 Tailwind 的语法基础上编写嵌套的 CSS 声明
- nesting: true,
- applyBaseStyles: false,
- }),icon({include: {gg: ['*'],
@@ -35,7 +30,7 @@ export default defineConfig({enabled: true,},vite: {
- plugins: [svgr()],
+ plugins: [svgr(), tailwindcss()],},trailingSlash: 'never',});
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index a7de2d0..28e5899 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -140,10 +140,5 @@ export default {},},},
- plugins: [
- require('@tailwindcss/container-queries'),
- require('tailwindcss-animate'),
- require('tailwind-clip-path'),
- require('@tailwindcss/typography'),
- ],
+ plugins: [require('@tailwindcss/container-queries'), require('tailwindcss-animate'), require('@tailwindcss/typography')],};
原来的插件失效了,@plugin 引入也不行,不过可以直接写在 css 里问题不大,还有就是 layer 层级问题会导致一些样式继承的问题,总体来说这俩小项目迁起来倒是没什么问题,后面迁移就持续更新这篇文章吧。
总结升级问题解决方案
问题一:Astro PostCSS 配置冲突
Error: Package subpath './nesting/index.js' is not defined by "exports" in...
应对策略:
- 升级 Astro 至 5.2+ 版本
npx @astrojs/upgrade
- 卸载
@astrojs/tailwind
- 清理旧版 PostCSS 插件依赖
- 按照 tailwind 文档进行手动安装,安装
tailwindcss @tailwindcss/vite
/astro add tailwind
相关文章:

Tailwind CSS v4.0 升级与 Astro 5.2 项目迁移记录
本文博客链接 https://ysx.cosine.ren/tailwind-update-v4-migrate 自用小记。 Tailwind CSS v4.0 - Tailwind CSS 新的高性能引擎 - 完整构建的速度速度快 5 倍,增量构建的速度快于 100 倍以上 —— 以微秒为单位进行测量。为现代 Web 设计 - 建立在前沿的 CSS 特…...

TongSearch3.0.4.0安装和使用指引(by lqw)
文章目录 安装准备手册说明支持的数据类型安装控制台安装单节点(如需集群请跳过这一节)解压和启动开启X-Pack Security和生成p12证书(之后配置内置密码和ssl要用到)配置内置用户密码配置ssl(先配置内置用户密码再配ssl)配置控制台…...

低代码产品表单渲染架构
在React和Vue没有流行起来的时候,低代码产品的表单渲染设计通常会使用操作Dom的方式实现。 下面是一个表单的例子: 产品层 用户通过打开表单,使用不同业务场景业务下的表单页面,中间的Render层就是技术实现。 每一个不同业务的表单…...

windows 剪切板的写入、读取,包括图片,文本内容
介绍 在windows开发过程中,我们可能会需要对系统剪切板进行操作,其中包括读取剪切板数据和将数据写入到剪切板中 设置剪切板内容 /*** brief 设置剪切板内容* param[in] pszData 指向缓冲区的指针* param[in] nDataLen 缓冲区长度* return 成功返回TRU…...

Matplotlib 高级图表绘制与交互式可视化(mpld3)
我们先重新回忆一下它的主要作用: 一、Matplotlib 简介 Matplotlib 是 Python 中一个非常强大的可视化库,广泛用于数据可视化、科学计算和工程领域。它提供了丰富的绘图功能,可以生成各种静态、动态和交互式的图表。以下是 Matplotlib 的主要功能及其详细讲解。 二、基本…...

(9)gdb 笔记(2):查看断点 info b,删除断点 delete 3,回溯 bt,
(11) 查看断点 info b: # info b举例: (12)删除断点 delete 2 或者删除所有断点: # 1. 删除指定的断点 delete 3 # 2. 删除所有断点 delete 回车,之后输入 y 确认删除所有断点 举…...

专业学习|通过案例了解蒙特卡罗模拟实操步骤与含义
一、蒙特卡罗模拟介绍 蒙特卡罗模拟(Monte Carlo Simulation)是一种基于随机采样的数值计算方法,用于解决具有不确定性或复杂概率分布的问题。其核心思想是通过多次随机抽样来逼近系统的行为或目标函数的真实值,进而对系统进行评估…...

云端智慧:创业公司如何以全球视野选择最佳平台,实现业务新高度
2016年8月,一个名叫Bryce Adams的人辞去了自己原本很稳定的工作,开始追逐梦想:为使用WooCommerce(一种开源的WordPress数字商务插件)的公司开发一种能提供各类报表解决方案的应用。为此他成立了Metorik公司ÿ…...

【工具变量】中国省级八批自由贸易试验区设立及自贸区设立数据(2024-2009年)
一、测算方式:参考C刊《中国软科学》任晓怡老师(2022)的做法,使用自由贸易试验区(Treat Post) 表征,Treat为个体不随时间变化的虚拟变量,如果该城市设立自由贸易试验区则赋值为1,反之赋值为0&am…...

猫眼Java开发面试题及参考答案(上)
详细介绍项目,像项目中如何用 Redis,用到 Redis 哪些数据类型,项目中遇到哪些问题,怎么解决的 在我参与的一个电商项目中,Redis 发挥了至关重要的作用。这个电商项目主要是为用户提供商品浏览、购物车管理、订单处理等一系列功能。 在项目中使用 Redis 主要是为了提升系统…...

WSL2中安装的ubuntu开启与关闭探讨
1. PC开机后,查询wsl状态 在cmd或者powersell中输入 wsl -l -vNAME STATE VERSION * Ubuntu Stopped 22. 从windows访问WSL2 wsl -l -vNAME STATE VERSION * Ubuntu Stopped 23. 在ubuntu中打开一个工作区后…...

Linux抢占式内核:技术演进与源码解析
一、引言 Linux内核作为全球广泛使用的开源操作系统核心,其设计和实现一直是计算机科学领域的研究热点。从早期的非抢占式内核到2.6版本引入的抢占式内核,Linux在实时性和响应能力上取得了显著进步。本文将深入探讨Linux抢占式内核的引入背景、技术实现以及与非抢占式内核的…...

【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】2.28 NumPy+Matplotlib:科学可视化的核心引擎
2.28 NumPyMatplotlib:科学可视化的核心引擎 目录 #mermaid-svg-KTB8Uqiv5DLVJx7r {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KTB8Uqiv5DLVJx7r .error-icon{fill:#552222;}#mermaid-svg-KTB8Uqiv5…...

C#面试常考随笔12:游戏开发中常用的设计模式【C#面试题(中级篇)补充】
C#面试题(中级篇),详细讲解,帮助你深刻理解,拒绝背话术!-CSDN博客 简单工厂模式 优点: 根据条件有工厂类直接创建具体的产品 客户端无需知道具体的对象名字,可以通过配置文件创建…...

【深度学习入门_机器学习理论】朴素贝叶斯(NaiveBayes)
本部分主要为机器学习理论入门_熟悉朴素贝叶斯算法,书籍参考 “ 统计学习方法(第二版)”。 学习目标: 熟悉条件概率、先验概率、后验概率、全概率,熟悉朴素贝叶斯算法原理与推判断过程;熟悉参数估计&#…...

docker pull Error response from daemon问题
里面填写 里面解决方案就是挂代理。 以虚拟机为例,将宿主机配置端口设置,https/http端口设为7899 配置虚拟机的http代理: vim /etc/systemd/system/docker.service.d/http-proxy.conf里面填写,wq保存 [Service] Environment…...

javaEE-8.JVM(八股文系列)
目录 一.简介 二.JVM中的内存划分 JVM的内存划分图: 堆区:编辑 栈区:编辑 程序计数器:编辑 元数据区:编辑 经典笔试题: 三,JVM的类加载机制 1.加载: 2.验证: 3.准备: 4.解析: 5.初始化: 双亲委派模型 概念: JVM的类加…...

25.02.04 《CLR via C#》 笔记 13
核心机制 第二十章 异常和状态管理 什么是异常:异常指成员没有完成它的名称所宣称的行动;异常是程序运行过程中用来表示错误并处理的机制,错误可以是更广义的,包括程序中未捕获的问题或逻辑缺陷。异常处理机制(try-c…...

git 项目的更新
更新项目 当自己的本地项目与 远程的github 的仓库已经建立远程连接时, 则直接按照下面的步骤, 将本地的项目代码更新到远程仓库。 # Stage the resolved file git add README.md <file1> <file2># To stage all changes: git add .# Comm…...

【Rust自学】17.3. 实现面向对象的设计模式
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 17.3.1. 状态模式 状态模式(state pattern) 是一种面向对象设计模式,指的是一个值拥有的内部状态由数个状态对象(…...

51c视觉~CV~合集10
我自己的原文哦~ https://blog.51cto.com/whaosoft/13241694 一、CV创建自定义图像滤镜 热图滤镜 这组滤镜提供了各种不同的艺术和风格化光学图像捕捉方法。例如,热滤镜会将图像转换为“热图”,而卡通滤镜则提供生动的图像,这些图像看起来…...

如何安全地管理Spring Boot项目中的敏感配置信息
在开发Spring Boot应用时,我们经常需要处理一些敏感的配置信息,比如数据库密码、API密钥等。以下是一个最佳实践方案: 1. 创建配置文件 application.yml(版本控制) spring:datasource:url: ${MYSQL_URL:jdbc:mysql…...

Docker小游戏 | 使用Docker部署2048网页小游戏
Docker小游戏 | 使用Docker部署2048网页小游戏 前言项目介绍项目简介项目预览二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署2048网页小游戏下载镜像创建容器检查容器状态检查服务端口安全设置四、访问2048网页小游戏五、总结前言 在当今快速发展的技术世…...

RabbitMQ深度探索:消息幂等性问题
RabbitMQ 消息自动重试机制: 让我们消费者处理我们业务代码的时候,如果抛出异常的情况下,在这时候 MQ 会自动触发重试机制,默认的情况下 RabbitMQ 时无限次数的重试需要认为指定重试次数限制问题 在什么情况下消费者实现重试策略…...

Linux网络 | 进入数据链路层,学习相关协议与概念
前言:本节内容进入博主讲解的网络层级中的最后一层:数据链路层。 首先博主还是会线代友友们认识一下数据链路层的报文。 然后会带大家重新理解一些概念,比如局域网交换机等等。然后就是ARP协议。 讲完这些, 本节任务就算结束。 那…...

芝法酱学习笔记(2.6)——flink-cdc监听mysql binlog并同步数据至elastic-search和更新redis缓存
一、需求背景 在有的项目中,尤其是进销存类的saas软件,一开始为了快速把产品做出来,并没有考虑缓存问题。而这类软件,有着复杂的业务逻辑。如果想在原先的代码中,添加redis缓存,改动面将非常大,…...

JavaScript系列(58)--性能监控系统详解
JavaScript性能监控系统详解 📊 今天,让我们深入探讨JavaScript的性能监控系统。性能监控对于保证应用的稳定性和用户体验至关重要。 性能监控基础概念 🌟 💡 小知识:JavaScript性能监控是指通过收集和分析各种性能指…...

GESP2023年12月认证C++六级( 第三部分编程题(1)闯关游戏)
参考程序代码: #include <cstdio> #include <cstdlib> #include <cstring> #include <algorithm> #include <string> #include <map> #include <iostream> #include <cmath> using namespace std;const int N 10…...

git 新项目
新项目git 新建的项目如何进行git 配置git git config --global user.name "cc" git config --global user.email ccexample.com配置远程仓库路径 // 添加 git remote add origin http://gogs/cc/mc.git //如果配错了,删除 git remote remove origin初…...

系统URL整合系列视频一(需求方案)
视频 系统URL整合系列视频一(需求方案) 视频介绍 (全国)某大型分布式系统Web资源URL整合需求实现方案讲解。当今社会各行各业对软件系统的web资源访问权限控制越来越严格,控制粒度也越来越细。安全级别提高的同时也增…...