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

Tailwind CSS 初学者入门指南:项目集成,主要变更内容!

网站名称类型网址
Tailwind CSS 官方文档官方文档https://tailwindcss.com/docs
Tailwind Play在线编辑器https://play.tailwindcss.com/
Tailwind Awesome资源集合https://www.tailwindawesome.com/
Tailwind CSS 中文文档中文文档https://www.tailwindcss.cn/
komavideo/LearnTailwindCSSGithub教程https://github.com/komavideo/LearnTailwindCSS

✨ 简介:什么是 Tailwind CSS?

Tailwind CSS 是一个实用优先的 CSS 框架,提供大量原子类(utility classes),使开发者能够快速构建响应式和现代化的用户界面。

优点包括:

  • 🚀 快速开发

  • 🔧 高度可定制

  • 🧱 原子化设计

  • 😍 社区资源丰富(例如组件库、插件等)

🛠️ Tailwind CSS V3 集成指南

  1. 创建 Vue / React 项目(使用 Vite):
npm create vite@latest my-vue-app -- --template vue
或
npm create vite@latest my-vue-app -- --template react
cd my-vue-app
npm install
  1. 安装 Tailwind CSS 及其依赖:
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
  1. 配置 tailwind.config.js
export default {content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],theme: {extend: {},},plugins: [],
}
  1. src/assets/main.csssrc/index.css 中添加 Tailwind 指令:
@tailwind base;
@tailwind components;
@tailwind utilities;

🛠️ Tailwind CSS V4 集成指南

  1. 创建 Vue / React 项目(使用 Vite):
npm create vite@latest my-vue-app -- --template vue
或
npm create vite@latest my-vue-app -- --template react
cd my-vue-app
npm install
  1. 安装 Tailwind CSS 及其依赖:
npm install -D tailwindcss @tailwindcss/vite
  1. 配置 vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({plugins: [tailwindcss(),],
})
  1. src/assets/main.csssrc/index.css 中添加 Tailwind 指令:
@import "tailwindcss"; 

🧠 V3 与 V4 的不同

🚫v4 不再使用 tailwind.config.js


在 Tailwind CSS v3中,我们通过 tailwind.config.js 文件来进行配置,包括内容路径、插件、主题扩展、前缀设置等。

但到了 v4,这些设置被“拆分”并迁移至 index.css 中 。

📦 内容(content)配置:自动化完成


在旧版本中,你需要手动指定项目中哪些文件会用到 Tailwind 类名,例如:

content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']

而在 v4 中,这一步骤完全自动化 ✅。Tailwind 会自动扫描并分析项目文件,无需再配置 content 字段。


🔌 插件配置的新方式


在 v3 中,你可以这样注册插件:

// tailwind.config.js
plugins: [require('@tailwindcss/forms')]

v4 中则直接在 CSS 文件顶部导入插件,示例如下:

@import "tailiwindcss";
@plugin "daisyui";

注意:插件名需根据官方文档或第三方库说明书来书写。

🧩 前缀配置方式变化


v3 中我们可以在 tailwind.config.js 文件中添加前缀:

prefix: 'tw-'

v4 则需要在 CSS 文件顶部配置前缀,同时要求使用冒号分隔:

@import "tailiwindcss" prefix(D);

⚠️ 注意:新版本前缀必须使用 冒号 分隔,例如:D:text-red-500,而非 D-text-red-500

<div className="D:text-sm"> </div>

🎨 主题定制与 theme 指令


在 v3 中使用 extend 来扩展默认主题,例如:

extend: {colors: {twitter: '#1DA1F2',orange: {500: '#FF5722',},}
}

v4 中这一切被迁移到 CSS 文件内的 @theme 指令中

@theme {D-color-twitter: #1DA1F2;D-color-orange-500: #FF5722;space: initial; /* 相当于 v3 的 screens */
}
  • 可以通过变量名是否存在来判断是“新增”还是“覆盖”主题配置。

🧠 @theme 是 v4 中主题定制的核心,取代了原来的 theme.extend

🔄 配置项名称的变化

Tailwind v4 对部分配置项名称进行了统一和现代化改进,例如:

v3 名称v4 名称说明
screens--breakpoint-*控制响应式断点(默认变量)
colors--color-*所有颜色变量采用前缀命名

📌 小结:迁移指南 ✅

配置项v3 方式v4 方式
配置文件tailwind.config.js 自动完成,无需tailwind.config.js
插件 plugins在 config 中注册插件在 CSS 文件中使用 @plugin 导入
前缀 prefix在 config 中写 prefix: 'tw-'在 CSS 顶部用 @prefix 设置
主题扩展 theme使用 extend 合并设置使用 @theme 并按变量名设置

Tailwind CSS v4 大幅简化了配置方式,早学早超神 🧙‍♂️✨!

如果你觉得这篇文章对你有帮助,不妨点个赞 ❤️、转发 🌐 或留言互动 💬!下一篇将带你解锁 如何利用Tailiwindcss 轻松完成网站的响应式设计,敬请期待!

相关文章:

Tailwind CSS 初学者入门指南:项目集成,主要变更内容!

网站名称类型网址Tailwind CSS 官方文档官方文档https://tailwindcss.com/docsTailwind Play在线编辑器https://play.tailwindcss.com/Tailwind Awesome资源集合https://www.tailwindawesome.com/Tailwind CSS 中文文档中文文档https://www.tailwindcss.cn/komavideo/LearnTail…...

HOJ.单词统计

目录 题目算法标签: 模拟, 字符串操作思路代码*后续 A C AC AC代码 题目 一段英语短文的内容记录于 lines 中&#xff0c;每行输入 lines[i] 仅包含 a-z , . , -&#xff0c;即英文小写字母&#xff0c;空格&#xff0c;逗号&#xff0c;句号和续行符。 请统计单词数量&#…...

C++ round 函数笔记 (适用于算法竞赛)

在算法竞赛中&#xff0c;处理浮点数并将其转换为整数是常见的需求&#xff0c;round 函数是标准库提供的用于执行“四舍五入”到最近整数的工具。理解其工作方式和潜在问题对于避免错误至关重要。 1. 基本用法 头文件 要使用 round 函数&#xff0c;需要包含 <cmath>…...

远程访问服务器的Jupyter Notebook

在 Linux 服务器上安装 Jupyter Notebook 可以直接调用服务器资源,适合处理大规模数据处理、复杂模型训练等计算密集型任务,避免本地设备算力不足的限制。 一、安装 Jupyter Notebook(在服务器上) 激活 conda 环境安装 conda install jupyter notebook 关于安装命名 1.…...

DNS实验

DNS原理 客户端发起请求&#xff1a;客户端向本地 DNS 服务器发送域名解析请求&#xff0c;这是流程的起始点。本地 DNS 服务器查询根域名服务器&#xff1a;若本地 DNS 服务器缓存中无对应记录&#xff0c;它向根域名服务器发起查询&#xff0c;根域名服务器是 DNS 系统顶层&a…...

SQL实战:02之连续数问题求解

文章目录 概述题目:体育馆的人流量题解步骤一&#xff1a;构造出一个连续序列步骤二&#xff1a;找出符合条件的组的序号步骤三&#xff1a;fetch结果&#xff0c;使用内连接过滤出符合条件的记录。完整SQL 题目二&#xff1a;连续出现的数字题解步骤一&#xff1a;分区并构建连…...

【C++】STL之deque

deque Deque 的底层既不直接依赖 vector 也不依赖 list&#xff0c;而是结合了两者的思想&#xff0c;采用了一种分块&#xff08;chunk&#xff09;存储与动态指针数组&#xff08;map&#xff09;结合的结构。以下是详细分析&#xff1a; 1. 底层结构设计 Deque 的核心设计…...

HTB - BigBang靶机记录

HTB - BigBanghttps://mp.weixin.qq.com/s/D7yR00kHdiIfoOFk_jHa9w...

AI时代的能力重构与终身进化

在数字技术加速迭代、职业边界日益模糊的当下,自我提升已从“阶段式学习”演变为“持续性进化”。这一转型的底层逻辑在于:个体能力需从“知识积累”转向“能力重构”,以适应AI技术重塑的社会分工与价值创造模式。本文将从认知升级、技能进化、生态构建三个维度,解析AI时代…...

Java—— 正则表达式 方法及捕获分组

识别正则表达式的方法 方法名说明public String[] matches(String regex) 判断字符串是否满足 正则表达式的规则 public string replaceAll(String regex,string newstr) 按照正则表达式的 规则进行替换 public string[] split(String regex) 按照正则表达式的 规则切割字符串…...

《100天精通Python——基础篇 2025 第2天:Python解释器安装与基础语法入门》

目录 一、Windows安装Python1.1 下载并安装 Python1.2 测试安装是否成功 二、Linux系统安装Python(新手可以跳过)2.1 基于RockyLinux系统安装Python(编译安装)2.2 基于Ubuntu系统安装Python(编译安装)2.3 macOS 安装python解释器 三、如何运行Python程序&#xff1f;3.1 Python…...

Linux平台实现低延迟的RTSP、RTMP播放

在流媒体播放器的开发过程中&#xff0c;RTSP&#xff08;实时流协议&#xff09;和RTMP&#xff08;实时消息协议&#xff09;是广泛应用的流媒体协议。本博客将介绍如何使用大牛直播SDK实现一个Linux平台下的RTSP/RTMP播放器。大牛直播SDK的Linux平台播放SDK&#xff0c;支持…...

安宝特案例 | AR技术在院外心脏骤停急救中的革命性应用

00 案例背景 在院外心脏骤停 (OHCA) 的突发救援中&#xff0c;时间与效率直接决定着患者的生命。传统急救模式下&#xff0c;急救人员常通过视频或电话与医院医生进行沟通&#xff0c;以描述患者状况并依照指令行动。然而&#xff0c;这种信息传递方式往往因信息不完整或传递延…...

chili3d调试笔记9 参数化建模+ai生成立方体

mainwindow 怎么渲染boxnode https://github.com/ticket180/chili3d chili3d ai画立方体...

天梯——L1-110 这不是字符串题

代码 #include<bits/stdc.h> using namespace std; int main(){int n,m;cin>>n>>m;string s;for(int i0;i<n;i){int x;cin>>x;schar(x0);}while(m--){int x;cin>>x;if(x1){int l1;string s1;cin>>l1;for(int i0;i<l1;i){int a;cin&…...

React在什么情况下需要用useReducer

在 React 中&#xff0c;useReducer 是一个用于管理复杂状态逻辑的 Hook。它是 useState 的替代方案&#xff0c;适用于状态更新逻辑复杂或状态之间相互关联的场景。 什么时候需要使用 useReducer 状态更新逻辑复杂&#xff1a; 如果状态更新涉及多个操作或有复杂的逻辑&#x…...

要从给定的数据结构中提取所有的 itemList 并将其放入一个新的数组中

const data [{id:1,itemList:[{id:1-1,list:0},{id:1-2,list:0}]},{id:2,itemList:[{id:2-1,list:0}]} ]使用 forEach const newItemList [];data.forEach(item > {newItemList.push(...item.itemList); });console.log(newItemList);reduce const newItemList data.re…...

程序员鱼皮最新项目-----AI超级智能体教程(一)

文章目录 1.前言1.什么是AI大模型2.什么是多模态3.阿里云百炼平台介绍3.1文本调试展示3.2阿里云和dashscope的关系3.3平台智能体应用3.4工作流的创建3.5智能体编排应用 1.前言 最近鱼皮大佬出了一套关于这个AI 的教程&#xff0c;关注鱼皮大佬很久了&#xff0c;鱼皮大佬确实在…...

17.磁珠在EMC设计中的运用

磁珠在EMC设计中的运用 1. 磁珠的高频等效特性2. 磁珠的参数分析与选型3. 磁珠应用中的隐患问题 1. 磁珠的高频等效特性 和磁环类似&#xff0c;低频段感性jwL为主&#xff0c;高频段阻性R为主。 2. 磁珠的参数分析与选型 不需要太在意磁珠在100MHz时的电阻值&#xff0c;选型…...

常见接口测试常见面试题(JMeter)

JMeter 是 Apache 提供的开源性能测试工具&#xff0c;主要用于对 Web 应用、REST API、数据库、FTP 等进行性能、负载和功能测试。​它支持多种协议&#xff0c;如 HTTP、HTTPS、JDBC、SOAP、FTP 等。 在一个线程组中&#xff0c;JMeter 的执行顺序通常为&#xff1a;配置元件…...

2026届华为海思秋暑期IC实习秋招笔试真题(2025.04.23更新)

今天给大家分享下华为海思2025.04.23号最新IC笔试真题。 华为海思IC前端中后端(COT&XPU)岗位笔试机考题 更多华为海思数字IC岗秋招实习笔试真题&#xff0c;可以私信小编。 数字后端培训实战项目六大典型后端实现案例 秒杀数字后端实现中clock gating使能端setup viola…...

水域陆地两相宜,便携漏电探测仪

在自然灾害如洪水、地震、台风及火灾中&#xff0c;建筑物和电力设施易因结构破坏、线路老化或设备浸水导致绝缘失效&#xff0c;引发漏电事故。漏电不仅直接威胁人员生命安全&#xff0c;还可能引发二次火灾或爆炸&#xff0c;尤其在潮湿环境下导电性增强&#xff0c;触电风险…...

论文笔记(七十九)STOMP: Stochastic Trajectory Optimization for Motion Planning

STOMP: Stochastic Trajectory Optimization for Motion Planning 文章概括摘要一、引言二、相关工作三、STOMP 算法A. 探索B. 轨迹更新 四、机械臂的运动规划A. 设置B. 代价函数1&#xff09;障碍物代价&#xff1a;2&#xff09;约束代价&#xff1a;3&#xff09;扭矩代价&a…...

如何应对客户提出的不合理需求

在项目执行过程中&#xff0c;客户经常会提出一些看似不合理的需求&#xff0c;这些需求可能超出了预算、时间范围&#xff0c;或与项目初期的目标不符。应对这些不合理需求的最佳方法是通过清晰沟通、设定合理期望、与客户共同探索解决方案来有效管理这些需求。例如&#xff0…...

SEO的关键词研究与优化 第一章

关键词研究和优化是SEO的核心。通过深入了解目标受众使用的搜索词&#xff0c;我们可以优化网站内容&#xff0c;提高搜索引擎排名&#xff0c;并吸引更多相关流量。本章将详细探讨关键词研究的方法、和最佳实践。 关键词类型对比分析 1. 关键词研究的基础 了解不同类型的关键…...

A2A Agent 框架结构化分析报告

A2A Agent 框架结构化分析报告 第一章 绪论 1.1 引言 在全球数字化转型的浪潮中&#xff0c;人工智能&#xff08;Artificial Intelligence, AI&#xff09;技术正以前所未有的速度改变着我们的生活和工作方式。然而&#xff0c;随着AI系统的广泛应用&#xff0c;单一AI系统…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(10): つもり 计划/打算

日语学习-日语知识点小记-构建基础-JLPT-N4阶段&#xff08;10&#xff09;&#xff1a; つもり 计划/打算 1、前言&#xff08;1&#xff09;情况说明&#xff08;2&#xff09;工程师的信仰 2、知识点&#xff08;1&#xff09;つもり 计划/打算&#xff08;&#xff12;&a…...

对patch深入理解下篇:Patch+LSTM实现以及改进策略整理

我在去年11月份写了pat入理解的上篇&#xff0c;主要介绍patch的原理和代码实现过程。文章发布后很多朋友催更下篇&#xff0c;其实一直在积累素材&#xff0c;因为介绍完原理和实现之后&#xff0c;下一步肯定是要考虑如何改进。在这之前&#xff0c;首先&#xff0c;我们接着…...

线程同步与互斥(互斥)

目录 线程互斥 进程线程间的互斥相关背景概念 互斥量mutex 互斥量的接⼝ 初始化互斥量 初始化互斥量有两种⽅法 销毁互斥量 互斥量加锁和解锁 加锁的使用 互斥量实现原理探究 互斥量的封装 Mutex.hpp Main.cc 线程互斥 进程线程间的互斥相关背景概念 临界资源&…...

基于RFID的智能家居系统设计与实现

标题:基于RFID的智能家居系统设计与实现 内容:1.摘要 随着物联网技术的飞速发展&#xff0c;智能家居系统成为了人们关注的焦点。本研究的目的是设计并实现一个基于RFID&#xff08;射频识别&#xff09;的智能家居系统&#xff0c;以提高家居的智能化水平和用户的生活便利性。…...

JAVA设计模式——(六)装饰模式(Decorator Pattern)

JAVA设计模式——&#xff08;六&#xff09;装饰模式&#xff08;Decorator Pattern&#xff09; 介绍理解实现被装饰类被装饰类的具体实现装饰类装饰类具体实现测试 适用场景 介绍 动态给一个对象添加一些额外的功能&#xff0c;动态的扩展其功能。 理解 装饰模式&#xf…...

CGAL 网格等高线计算

文章目录 一、简介二、实现代码三、实现效果一、简介 这里等高线的计算其实很简单,使用不同高度的水平面与网格进行相交,最后获取不同高度的相交线即可。 二、实现代码 #include <iostream> #include <iterator> #include <map>...

Sharding-JDBC 系列专题 - 第十篇:ShardingSphere 生态与未来趋势

Sharding-JDBC 系列专题 - 第十篇:ShardingSphere 生态与未来趋势 本系列专题旨在帮助开发者全面掌握 Sharding-JDBC,一个轻量级的分布式数据库中间件。本篇作为系列的第十篇,也是本系列的总结篇,将全面回顾 Apache ShardingSphere 生态,包括其核心组件、功能模块和与其他…...

ETL 数据集成都包含哪些?

一、ETL 数据集成都包含哪些&#xff1f; 数字化时代数据已成为企业最为宝贵的资产之一。然而&#xff0c;企业的数据往往分散在多个不同的系统和平台中&#xff0c;如关系型数据库、文件系统、API 等。为了将这些分散的数据整合起来&#xff0c;为企业决策提供全面、准确的支…...

windows系统自定义powshell批处理脚本

windows自定义powshell批处理脚本 前几天看到大神自定义批处理骚操作操作&#xff0c;觉得很有意思&#xff0c;本篇文章记录一下入门学习笔记。 PowerShell 是一种功能强大的脚本语言和命令行外壳&#xff0c;基于.NET Framework&#xff0c;广泛应用于 Windows 系统管理、自…...

【计算机视觉】CV实战项目 - 基于YOLOv5与DeepSORT的智能交通监控系统:原理、实战与优化

基于YOLOv5与DeepSORT的智能交通监控系统&#xff1a;原理、实战与优化 一、项目架构与技术解析1.1 核心算法架构1.2 学术基础 二、实战环境配置2.1 硬件要求与系统配置2.2 分步安装指南 三、核心功能实战3.1 基础车辆计数3.2 自定义检测类别3.3 多区域计数配置 四、性能优化技…...

Java基础系列-HashMap源码解析3-红黑树

文章目录 红黑树定义与AVL树对比插入节点插入节点是根节点插入节点的叔叔是红色插入节点的叔叔是黑色 构建示例删除节点只有左子树/只有右子树 只有左孩子/只有右孩子没有孩子如果双黑节点的兄弟是黑色&#xff1a;如果双黑节点的兄弟是红色&#xff1a; 总结 红黑树 定义 与…...

Linux系统的延迟任务及定时任务

延迟任务的发起 在系统中我们可以使用at命令来发起延迟任务 at命令执行是调用的是atd服务&#xff0c;即使系统最小化安装atd也会被安装到系统中 at 任务信息存放在系统中/var/spool/at目录中 at 任务的日志文件被存放到/var/log/cron中 at 任务执行时如果遇到系统处于关闭状态…...

【蓝桥杯】水质检测

水质检测 题目描述 小明需要在一条 2 n 2 \times n 2n 的河床上铺设水质检测器。在他铺设之前&#xff0c;河床上已经存在一些检测器。如果两个检测器上下或者左右相邻&#xff0c;那么这两个检测器就是互相连通的。连通具有传递性&#xff0c;即如果 A A A 和 B B B 连通…...

【晶振】晶振的工作原理及其与单片机关系

晶振(晶体振荡器)是电子设备中常见的元件,其核心功能是提供稳定的时钟信号,而单片机(MCU)依赖这一信号来同步内部操作。以下是晶振的工作原理及其与单片机关系的详细说明: 一、晶振的工作原理 压电效应与谐振 晶振的核心是石英晶体,利用其压电效应: 当在晶体两端施加电…...

配置 C/C++ 语言智能感知(IntelliSense)的 c_cpp_properties.json 文件内容

配置 C/C 语言智能感知&#xff08;IntelliSense&#xff09;的 c_cpp_properties.json 文件内容 {"configurations": [{"name": "Linux","includePath": ["${workspaceFolder}/**","/opt/ros/humble/include/**&quo…...

Postgresql源码(143)统计信息基础知识(带实例)

概念与总结 高频值&#xff08;Most Common Values, MCV&#xff09;​​ 存储在 most_common_vals 中。每个高频值的频率通过 most_common_freqs 单独记录&#xff08;例如 0.010966667 等&#xff09;。​​MCV 用于优化等值查询​​&#xff08;如 poid 33&#xff09;&…...

【含文档+PPT+源码】基于SpringBoot+vue的疫苗接种系统的设计与实现

项目介绍 本课程演示的是一款 基于SpringBootvue的疫苗接种系统的设计与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系…...

解决 Dart Sass 的旧 JS API 弃用警告 的详细步骤和解决方案

以下是解决 Dart Sass 的旧 JS API 弃用警告 的详细步骤和解决方案&#xff1a; 错误原因 Dart Sass 1.x 版本中使用的旧 JavaScript API&#xff08;如 sass.render() 或 sass.compile() 的旧调用方式&#xff09;将在 2.0.0 版本中被移除。需迁移到新 API 以避免未来报错。…...

Concepts (C++20)

C20 Concepts Concepts 是 C20 引入的核心特性&#xff0c;用于显式约束模板参数&#xff0c;提升代码可读性和错误提示。以下通过代码示例和原理分步骤解析其用法。 1. 基本概念 目标&#xff1a;显式声明模板参数必须满足的条件。优势&#xff1a;替代复杂的 SFINAE 和 ena…...

CVE-2024-23897-Jenkins 2.441之前版本存在任意文件读取漏洞

1.漏洞介绍 Jenkins 2.441及更早版本&#xff0c;以及LTS 2.426.2及更早版本没有禁用其CLI命令解析器的一个功能&#xff0c;该功能会将参数中字符后跟的文件路径替换为该文件的内容&#xff0c;允许未经身份验证的攻击者读取Jenkins控制器文件系统上的任意文件。 2.poc利用 下…...

利用 SSE 实现文字吐字效果:技术与实践

利用 SSE 实现文字吐字效果:技术与实践 引言 在现代 Web 应用开发中,实时交互功能愈发重要。例如,在线聊天、实时数据监控、游戏中的实时更新等场景,都需要服务器能够及时将数据推送给客户端。传统的请求 - 响应模式在处理实时性要求较高的场景时显得力不从心,而 Server…...

离线部署kubernetes

麒麟Linux服务器 AMR架构 &#x1f9f0; 离线部署 Kubernetes v1.25.9&#xff08;麒麟系统 Docker&#xff09; 一、验证Docker部署状态 ‌检查Docker服务运行状态‌ systemctl status docker 预期输出应显示 Active: active (running)&#xff0c;表明服务已启动‌18。 ‌…...

2024武汉邀请赛B.Countless Me

题目链接 #include<bits/stdc.h> using namespace std; using lllong long;int main() {ios::sync_with_stdio(0),cin.tie(0),cout.tie(0);ll n; cin>>n;vector<ll>a(n1);ll res0;for(int i1;i<n;i) cin>>a[i],resa[i];ll ans0;for(int i32;i>…...

第53讲 农学科研中的AI伦理与可解释性——探索SHAP值、LIME等可解释工具与科研可信性建设之道

目录 一、为什么农学科研中需要“可解释AI”? ✅ 场景示例: 二、常见可解释AI工具介绍 1. SHAP(SHapley Additive exPlanations) 2. LIME(Local Interpretable Model-agnostic Explanations) 三、AI伦理问题在农学中的体现 🧭 公平性与偏见 🔐 数据隐私 🤖…...