什么时候用 Tailwind 什么时候用 CSS

结合自己开发项目,进行整理

对比图

特性/场景Tailwind CSS普通 CSS
常见布局✅ margin, padding, flex, grid⚠️ 可用但繁琐
基础样式✅ 颜色、字体、间距等预设值⚠️ 需要手动定义
响应式设计✅ sm:, md:, lg: 前缀⚠️ 需要写 media queries
特定数值❌ 受限于预设值✅ 完全自定义
复杂动画❌ 仅支持基础动画✅ @keyframes 完全控制
自定义渐变⚠️ 基础渐变支持✅ 完全自定义
伪类选择器⚠️ 基础支持 (hover:, focus:)✅ 完全支持
CSS变量❌ 不直接支持✅ 原生支持
第三方组件样式覆盖⚠️ 较难实现✅ 容易实现
开发速度✅ 快速❌ 相对较慢
代码复用❌ 需要重复类名✅ 可通过类/变量复用
文件体积✅ 按需生成,较小⚠️ 需要手动优化
学习曲线⚠️ 需要学习类名✅ 标准 CSS 语法
代码可读性⚠️ 类名可能很长✅ 结构清晰
维护性✅ 就地修改,直观⚠️ 需要在不同文件间切换

最佳实践:

1、优先使用 Tailwind

  • 对于 80% 的常见样式需求
  • 当样式符合设计系统预设值时

2、结合使用

  • 可以混合使用 Tailwind 和 CSS
  • 根据具体需求选择最合适的方案

3、使用 CSS 的时机

  • 当 Tailwind 类名组合过长时
  • 需要频繁复用的复杂样式组合
  • 需要特定数值或复杂效果时

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

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

相关文章

【软考】系统分析师第二版 新增章节 第20章微服务系统分析与设计

微服务系统是一类基于微服务架构风格的分布式系统,它将应用程序拆分成多个独立的小型服务,每个服务都运行在独立的进程中,并采用轻量级通信协议进行通信。这些服务可以由不同的团队开发、不同的编程语言编写,并且可以按需部署。微…

JS类型检测大全:从零基础到高级应用

文章目录 1. typeof 操作符typeof null 为什么是 object 2. instanceof 操作符3. Object.prototype.toString.call()(最准确的)4. Array.isArray()5. constructor 属性总结 在JavaScript中,有多种方法可以用来检测数据类型。每种方法都有其特…

基于SSM的校园美食交流系统【附源码】

基于SSM的校园美食交流系统 效果如下: 管理员主页面 用户主页面 美食信息页面 美食资讯页面 修改密码页面 论坛中心页面 研究背景 随着高校信息化建设的不断推进,校园生活日益丰富多样,学生对于美食的需求与探索也愈发旺盛。然而&#xff…

css实现div被图片撑开

固定好盒子的宽度&#xff0c;高度随传过来的图片大小决定 <div class"tab-con"> <img:src"concertInfo.detail"alt""> </div>.tab-con {margin-bottom: 20px;width: 700px;img {width: 700px;height: auto;object-fit: cont…

PICO+Unity MR空间网格

官方链接&#xff1a;空间网格 | PICO 开发者平台 注意&#xff1a;该功能只能打包成APK在PICO 4 Ultra上真机运行&#xff0c;无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上&#xff0c;勾选…

斗破QT编程入门系列之前言:认识Qt:获取与安装(四星斗师)

本系列是在学习完C之后&#xff0c;然后通过Qt构建界面来&#xff0c;赋予枯燥的代码新的样貌&#xff0c;这样我们才能开发出更人性化的程序&#xff0c;同时会进一步提高初学者对编程的兴趣&#xff0c;大家加油&#xff0c;斗破Qt来了。 斗破Qt目录&#xff1a; 斗破Qt编程…

PyTorch核心概念:从梯度、计算图到连续性的全面解析(三)

文章目录 Contiguous vs Non-Contiguous TensorTensor and ViewStrides非连续数据结构&#xff1a;Transpose( )在 PyTorch 中检查Contiguous and Non-Contiguous将不连续张量&#xff08;或视图&#xff09;转换为连续张量view() 和 reshape() 之间的区别总结 参考文献 Contig…

家庭宽带如何开启公网ipv4和ipv6

好久没更新了&#xff0c;最近在家里折腾nas。一来自己有下电影的习惯&#xff0c;二来手机的icloud容量也不够了。所以买了群晖的423,但是nas要想用的畅快&#xff0c;外网访问必不可少。所以我之前研究了下&#xff0c;打家里的电信快带打通了外网。 一般nas的服务商基本都会…

ORACLE创建用户之后查询不到创建的用户

CREATE USER hr1 IDENTIFIED BY hr123DEFAULT TABLESPACE test_spacTEMPORARY TABLESPACE temp_spacQUOTA UNLIMITED ON test_spac;如果是按照这样创建的&#xff0c;Oracle 会将 hr1 转换为大写&#xff0c;因此在数据库中存储的用户名为 HR1 查询的时候要这样编写sql语句 S…

【Linux】Ansible集中化运维工具(详解)安装、常用模块、playbook脚本

文章目录 一、Ansible安装及远程控制1、关闭防火墙和SELinux2、安装ansible3、配置SSH无密码登录1、在管理机上生成一对密钥2、将公钥下发到远程主机3、保管密钥 4、主机目录 二、常用模块1、setup模块2、copy模块3、file模块4、shell模块5、script模块6、ping模块7、group模块…

基于 RNN 的语言模型

基于 RNN 的语言模型 循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一类网络连接中包含环路的 神经网络的总称。 给定一个序列&#xff0c;RNN 的环路用于将历史状态叠加到当前状态上。沿着时间维度&#xff0c;历史状态被循环累积&#xff0c;并作为…

Flink处理无界数据流

Apache Flink 是一个专为处理无界和有界数据流而设计的流处理框架。处理无界数据流的关键在于能够实时处理不断到达的数据&#xff0c;并且保证处理的正确性和高效性。以下是Flink处理无界数据流的主要步骤和技术&#xff1a; 1. 数据源 (Source) 无界数据流的第一个步骤是从…

oracle服务器意外宕机数据库启动失败故障处理记录

客户反馈由于服务器意外宕机&#xff0c;导致数据库业务不能正常运行&#xff0c;经过一番努力后通过redo日志恢复成功&#xff01; 故障描述&#xff1a;ORA-00600: 内部错误代码, 参数: [krctcr_4], [1179922061], [1179942042], [], [], [], [], [], [], [], [], [] 现将主要…

第二十九篇——线性代数:“矩阵”到底怎么用?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 数学中的线性代数&#xff0c;再生活中的落地和应用&#xff0c;是我这个…

nodejs:下载,安装,系统环境配置,更换镜像

​​​​下载 地址&#xff1a;https://nodejs.org/zh-cn/download/prebuilt-installer 安装包 开始安装 安装完成 给文件夹添加权限 创建两个文件夹 node_cache node_global 更新环境变量 修改环境变量&#xff0c;新的全局模块路径&#xff0c;这样在任何位置运行命令时都…

AMD显卡低负载看视频掉驱动(chrome edge浏览器) 高负载玩游戏却稳定 解决方法——关闭MPO

2024.11.9更新 开关mpo ulps 感觉有用但是还是掉驱动&#xff0c;现在确定是window顶驱动问题 按网上的改注册表和组策略会让自己也打不上驱动 目前感觉最好的办法就是&#xff0c;重置此电脑&#xff0c;然后你就摆着电脑挂个十分钟半小时别动&#xff0c;一开始他是不显示…

案例精选 | 河北省某检察院安全运营中异构日志数据融合的实践探索

河北省某检察院是当地重要的法律监督机构&#xff0c;肩负着维护法律尊严和社会公平正义的重要职责。该机构依法独立行使检察权&#xff0c;负责对犯罪行为提起公诉&#xff0c;并监督整个诉讼过程&#xff0c;同时积极参与社会治理&#xff0c;保护公民权益&#xff0c;推动法…

srs http-flv处理过程

目录 处理tcp请求,创建HttpConn 解析 http request创建consumer 读取consumer数据转封装为flv 处理tcp请求,创建HttpConn 调用堆栈如下: srs!SrsHttpConn::SrsHttpConn(ISrsHttpConnOwner*, ISrsProtocolReadWriter*, ISrsHttpServeMux*, std::__1::basic_string<ch…

解题--多数元素

给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1a;3 此算法用…

【论文阅读】火星语义分割的半监督学习

【论文阅读】火星语义分割的半监督学习 文章目录 【论文阅读】火星语义分割的半监督学习一、介绍二、联系工作3.1Deep Learning for Mars3.2 数据集可以分为三类&#xff1a;3.3 半监督学习 三、提出的火星图像分割数据集四、方法四、实验 S 5Mars: Semi-Supervised Learning …