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

(一)Tailwindcss


文章目录

  • 项目地址
  • 一、常用
    • 1.1 字体
      • 1. 字体大小
      • 2. 字体粗细
      • 3. 文字位置
    • 1.2 宽/高/背景/边框
      • 1. 宽度
      • 2. 背景
      • 3. 边框
      • 4. hover
      • 5. 媒体查询
    • 1.3 FlexBox
      • 1. Flex布局
      • 2. shrink
      • 3. Grid 布局


项目地址

  • 教程作者:
  • 教程地址:
  • 代码仓库地址:
  • 所用到的框架和插件:
dbt 
airflow

一、常用

1.1 字体

1. 字体大小

在这里插入图片描述

  • 效果

在这里插入图片描述

2. 字体粗细

在这里插入图片描述

3. 文字位置

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

1.2 宽/高/背景/边框

1. 宽度

在这里插入图片描述

2. 背景

在这里插入图片描述

3. 边框

在这里插入图片描述

4. hover

在这里插入图片描述

5. 媒体查询

在这里插入图片描述

1.3 FlexBox

1. Flex布局

在这里插入图片描述

2. shrink

类名等价 CSS行为
flex-1flex: 1 1 0%自动扩张填满剩余空间
flex-autoflex: 1 1 auto会扩张,也会缩小,基础大小由内容决定
flex-initialflex: 0 1 auto不扩张,允许缩小,基础大小由内容决定
flex-noneflex: none不扩张、不缩小,固定大小

3. Grid 布局

在这里插入图片描述

http://www.dtcms.com/a/324034.html

相关文章:

  • 【开源】分层状态机(HFSM)解析:复杂逻辑的清晰表达与FPGA实现(附完整的Verilog交通灯案例及仿真)
  • Loki+Alloy+Grafana构建轻量级的日志分析系统
  • aurora接口ufc控流设计
  • Rust面试题及详细答案120道(11-18)-- 控制流与函数
  • Docker 镜像常见标签(如 `标准`、`slim`、`alpine` 和 `noble`)详细对比
  • 利用 SD-WAN 技术优化机房运维与网络安全评估的最佳实践
  • 2025下半年AI技术热点全景透视:从多模态革命到具身智能爆发
  • SpringMVC的知识点总结
  • Microsoft Store​​ 总是打不开页面怎么办
  • LeetCode131~150题解
  • opencv:图像轮廓检测与轮廓近似(附代码)
  • 浏览器CEFSharp88+X86+win7 之js交互开启(五)
  • 人工智能系列(8)如何实现无监督学习聚类(使用竞争学习)?
  • Lua基础+Lua数据类型
  • Java学习第一百二十一部分——HTTP
  • 超越基础!一文掌握CNN/Transformer/MoE架构,实战多模态AI(第三章)
  • 《解锁 C++ 基础密码:输入输出、缺省参数,函数重载与引用的精髓》
  • NLP 2025全景指南:从分词到128专家MoE模型,手撕BERT情感分析实战(第四章)
  • FlinkSQL Joins全解析
  • Spring基于XML的自动装配
  • 低版本 IntelliJ IDEA 使用高版本 JDK 语言特性的问题
  • IntelliJ IDEA 2025.2 重磅发布
  • 第16届蓝桥杯Scratch选拔赛初级及中级(STEMA)2025年1月12日真题
  • 机器学习——TF-IDF 衡量词语在文档中重要程度
  • 【代码随想录day 15】 力扣 257. 二叉树的所有路径
  • LeetCode 括号生成
  • Jmeter性能测试之检测服务器CPU/Memory/磁盘IO/网络IO
  • 服务器硬件电路设计之 I2C 问答(三):I2C 总线上可以接多少个设备?如何保证数据的准确性?
  • 【Qt】QCustomPlot 简易配置教程
  • XML 指南