tailwindcss 4 使用的一些注意点

news2025/4/24 23:34:51

目录

一、tailwindcss 4 官网地址变更了

二、自定义颜色的使用方式

三、安装的时候可能的报错


一、tailwindcss 4 官网地址变更了

之前的官网地址是:Tailwind CSS 中文网

现在的官网地址是:Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

也就是说 版本 4 的地址为com,一定不要搞错了。

要不然很多无用功,比如我 ……


二、自定义颜色的使用方式

提示:4 版本的颜色为--color-*,并且需要在主题命名空间里写。3 版本的写法不可以!

例如:

@theme inline {
  
  --color-primary-500: var(--color-primary-500);
}

使用方式:<span className="truncate text-promary-500">{user.email}</span>

三、安装的时候可能的报错

1.npx tailwindcss init -p 执行不了怎么回事?

版本问题,如果是安装3 版本的,需要安装 3 个东西,有postcss等,但是按照官网说的方法去执行上面的命令,总是失败,有可能是版本冲突,都更新到最新版或许可以解决。

查看版本:

npm list tailwindcss

npm list tailwindcss

或许如下是比较合适的:

2.是否要安装的@tailwindcss/postcss的问题

我因为项目内引入了shadcn,需要版本 4 的,安装后总是会提示postcss等等的问题,其实终归是版本冲突,所以要找最新的官网版本,一步一步按照流程进行,多试几次就好。比如这种报错:

[postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

stm32工程,拷贝到另一台电脑编译,错误提示头文件找不到cannot open source input file “core_cm4.h”

提示 cannot open source input file “core_cm4.h” ,找不到 [ core_cm4.h ] 这个头文件 . 于是我在原电脑工程文件里找也没有找到这个头文件 接下来查看原电脑keil的头文件引入配置,发现只引入了工程文件下的头文件, 那么core_cm4.h到底哪里来的? (到现在我也不清楚怎…

无锡东亭无人机培训机构电话

无锡东亭无人机培训机构电话&#xff0c;随着科技的迅猛发展&#xff0c;无人机逐渐走入我们的生活和工作领域&#xff0c;成为多种行业中不可或缺的工具。而在其广泛的应用中&#xff0c;如何正确、熟练地操控无人机成为了关键。因此&#xff0c;找到一家专业的无人机培训机构…

大厂文章阅读

1.异步任务处理系统&#xff0c;如何解决业务长耗时、高并发难题&#xff1f; 1)任务失败如何处理(CAS失败也可用)&#xff1a;1.指数退避,匹配下游任务执行系统的处理能力。比如收到下游任务执行系统的流控错误&#xff0c;或者感知到任务执行成为瓶颈&#xff0c;需要指数退…

卷积神经网络 CNN 系列总结(二)---数据预处理、激活函数、梯度、损失函数、优化方法等

数据预处理 零中心化、归一化 关于数据预处理我们有3个常用的符号,数据矩阵X,假设其尺寸是[N x D](N是数据样本的数量,D是数据的维度)。 均值减法(Mean subtraction)是预处理最常用的形式。它对数据中每个独立特征减去平均值,从几何上可以理解为在每个维度上都将数据…

速学Android 16新功能:带有进度的通知类型

前言 在当前已公布的Android 16版本中新增了一系列的功能特性和API&#xff0c;如&#xff1a; 动态壁纸的内容处理&#xff0c;提供新的 content API 预测性返回更新&#xff0c;添加了finishAndRemoveTaskCallback() 和 moveTaskToBackCallback等API 健康数据共享更新&…

微信小程序开发:微信小程序上线发布与后续维护

微信小程序上线发布与后续维护研究 摘要 微信小程序作为移动互联网的重要组成部分,其上线发布与后续维护是确保其稳定运行和持续优化的关键环节。本文从研究学者的角度出发,详细探讨了微信小程序的上线发布流程、后续维护策略以及数据分析与用户反馈处理的方法。通过结合实…

深度学习基础--CNN经典网络之分组卷积与ResNext网络实验探究(pytorch复现)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 ResNext是分组卷积的开始之作&#xff0c;这里本文将学习ResNext网络&#xff1b;本文复现了ResNext50神经网络&#xff0c;并用其进行了猴痘病分类实验…

面向对象的需求分析与UML构造块详解

目录 前言1 面向对象的需求分析概述2 UML构造块概述3 UML事物详解3.1 结构事物&#xff08;Structural Things&#xff09;3.2 行为事物&#xff08;Behavioral Things&#xff09;3.3 分组事物&#xff08;Grouping Things&#xff09;3.4 解释事物&#xff08;Annotational T…

计算机视觉色彩空间全解析:RGB、HSV与Lab的实战对比

计算机视觉色彩空间全解析&#xff1a;RGB、HSV与Lab的实战对比 一、前言二、RGB 色彩空间​2.1 RGB 色彩空间原理​2.1.1 基本概念​2.1.2 颜色混合机制​ 2.2 RGB 在计算机视觉中的应用​2.2.1 图像读取与显示​2.2.2 颜色识别​2.2.3 RGB 色彩空间的局限性​ 三、HSV 色彩空…

使用Docker安装Gogs

1、拉取镜像 docker pull gogs/gogs 2、运行容器 # 创建/var/gogs目录 mkdir -p /var/gogs# 运行容器 # -d&#xff0c;后台运行 # -p&#xff0c;端口映射&#xff1a;(宿主机端口:容器端口)->(10022:22)和(10880:3000) # -v&#xff0c;数据卷映射&#xff1a;(宿主机目…

【Web API系列】XMLHttpRequest API和Fetch API深入理解与应用指南

前言 在现代Web开发中&#xff0c;客户端与服务器之间的异步通信是构建动态应用的核心能力。无论是传统的AJAX技术&#xff08;基于XMLHttpRequest&#xff09;还是现代的Fetch API&#xff0c;它们都为实现这一目标提供了关键支持。本文将从底层原理、核心功能、代码实践到实…

ESP32开发入门:基于VSCode+PlatformIO环境搭建指南

前言 ESP32作为一款功能强大的物联网开发芯片&#xff0c;结合PlatformIO这一现代化嵌入式开发平台&#xff0c;可以大幅提升开发效率。本文将详细介绍如何在VSCode中搭建ESP32开发环境&#xff0c;并分享实用开发技巧。 一、环境安装&#xff08;Windows/macOS/Linux&#xf…

2025.4.13机器学习笔记:文献阅读

2025.4.13周报 题目信息摘要创新点网络架构实验结论不足以及展望 题目信息 题目&#xff1a; Physics-informed neural networks for inversion of river flow and geometry with shallow water model期刊&#xff1a; Physics of Fluids作者&#xff1a; Y. Ohara; D. Moteki…

编程助手fitten code使用说明(超详细)(vscode)

这两年 AI 发展迅猛&#xff0c;作为开发人员&#xff0c;我们总是追求更快、更高效的工作方式&#xff0c;AI 的出现可以说改变了很多人的编程方式。 AI 对我们来说就是一个可靠的编程助手&#xff0c;给我们提供了实时的建议和解决方&#xff0c;无论是快速修复错误、提升代…

Python自动化爬虫:Scrapy+APScheduler定时任务

在数据采集领域&#xff0c;定时爬取网页数据是一项常见需求。例如&#xff0c;新闻网站每日更新、电商价格监控、社交媒体舆情分析等场景&#xff0c;都需要定时执行爬虫任务。Python的Scrapy框架是强大的爬虫工具&#xff0c;而APScheduler则提供了灵活的任务调度功能。 一、…

技术分享|iTOP-RK3588开发板Ubuntu20系统旋转屏幕方案

iTOP-3588开发板采用瑞芯微RK3588处理器&#xff0c;是全新一代AloT高端应用芯片&#xff0c;采用8nmLP制程&#xff0c;搭载八核64位CPU&#xff0c;四核Cortex-A76和四核Cortex-A55架构&#xff0c;主频高达2.4GHz。是一款可用于互联网设备和其它数字多媒体的高性能产品。 在…

3.3.1 spdlog异步日志

文章目录 3.3.1 spdlog异步日志1. spdlog1. 日志作用2 .同步日志和异步日志区别 2. spdlog是什么下载命令&#xff1a;2. spdlog为什么高效3. spdlog特征5. spdlog输出控制6. 处理流程7. 文件io8.问题 2. 如何创建logger3. 如何创建sink4. 如何自定义格式化5. 如何创建异步日志…

Java 基础(4)—Java 对象布局及偏向锁、轻量锁、重量锁介绍

一、Java 对象内存布局 1、对象内存布局 一个对象在 Java 底层布局&#xff08;右半部分是数组连续的地址空间&#xff09;&#xff0c;如下图示&#xff1a; 总共有三部分总成&#xff1a; 1. 对象头&#xff1a;储对象的元数据&#xff0c;如哈希码、GC 分代年龄、锁状态…

【AI论文】OLMoTrace:将语言模型输出追溯到万亿个训练标记

摘要&#xff1a;我们提出了OLMoTrace&#xff0c;这是第一个将语言模型的输出实时追溯到其完整的、数万亿标记的训练数据的系统。 OLMoTrace在语言模型输出段和训练文本语料库中的文档之间找到并显示逐字匹配。 我们的系统由扩展版本的infini-gram&#xff08;Liu等人&#xf…