vscode前端项目使用Tailwind CSS开发必备技能,5分钟快速上手

Tailwind CSS IntelliSense 是一款功能强大的工具,可以帮助开发者更快、更高效地编写代码。该工具可以实时提供 Tailwind CSS 类的建议,减少错误,提高代码质量。通过使用 IntelliSense,开发者可以提高生产力,减少学习曲线,并提高应用程序的可访问性。如果你是一名使用 Tailwind CSS 的开发者,请务必充分利用这一强大的功能。

中文官网:Tailwind CSS - 只需书写 HTML 代码,无需书写 CSS,即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

 

插件安装Tailwind CSS

直接搜索,然后安装即可:Tailwind CSS官方插件,值得信赖

TailwindCSS类排列 

在使用 Tailwind CSS 编写类时,通常按照以下一般顺序排列类,以确保代码的清晰性和易读性:
1.定位类:包括控制元素位置的类,如 absolute, relative, fixed, static, sticky 等。
2.盒模型类:包括控制元素内边距、外边距、宽度和高度的类,如 p-, m-, w-, h- 等。
3.背景类:包括控制元素背景颜色、背景图片的类,如 bg-, bg-opacity-, bg-gradient-to- 等。
4.文本类:包括控制文本样式的类,如 text-, font-, leading-, tracking- 等。
5.边框类:包括控制元素边框样式、颜色、圆角的类,如 border-, rounded-, border-opacity- 等。
6.阴影类:包括控制元素阴影效果的类,如 shadow-.
7.显示类:包括控制元素显示和隐藏的类,如 hidden, block, inline, flex 等。
8.过渡类:包括控制元素过渡效果的类,如 transition-.
9.动画类:包括控制元素动画效果的类,如 animate-.
这只是一种常见的排列顺序,您可以根据自己的偏好和项目需求进行调整。保持一致性是关键,以便团队成员在阅读代码时能够更轻松地理解和维护样式。

例如:

<div
            className={
                'fixed top-0 left-0 w-full h-full bg-gray-200 flex items-center justify-center text-red-500 font-bold text-2xl'
            }
        >
            login page
        </div>

基本元素可混着用

1.高度h-12,宽度w-12,背景色 bg-red-500

2.border你可以设置元素的边框宽度、颜色和样式。

样式:border-solid实线、border-dashed虚线、border-dotted点线

宽度:border-2

颜色:border-red-500

3.inline、inline-block、block

inline元素无法设置宽高,内联元素不会独占一行,它们会在同一行上水平排列;

inline-block可以在一行中放置多个元素,并且它们的宽度和高度可以设置,而不会强制换行。这使得元素既可以享受块级元素的盒模型,又可以在水平方向上保持内联元素的行为;

block这个类通常用于将元素设置为块级元素,使其在文档流中占据整行。

4.invisible、hidden

invisible只是让元素不可见,hidden将元素完全隐藏。

5.flex、justify、items

flex使元素水平排列,flex flex-col使元素竖直排列(规定主轴);

justify总是使元素与flex的方向相同,如:justify-start最前,justify-center居中,justify-end最后,justify-around使首尾元素相距页边相等(是中间各元素间距的一半),且中间各元素之间的间距相同,justify-evenly使各元素及首尾元素距离页边的距离相等;

items的效果取决于交叉轴(垂直主轴)的方向,也有items-center等。

6.h-screen使一个容器占据整个屏幕的高度,无w-screen,有w-full

7.grid grid-cols-6 使元素每行排六个,到六个自动换行

8.边距m-2 填充p-2

边距m(各向)、mt上边距、mr右边距、mb下边距、ml左边距、mx水平方向的边距、my垂直方向的边距;

填充p(各向)、pt上填充、pr右填充、pb下填充、pl左填充、px水平方向的填充、py垂直方向的填充.

9.圆角

rounded-none无圆角、rounded-sm小圆角、rounded中等圆角、rounded-md中等圆角、rounded-lg大圆角、rounded-full完全圆形

10.阴影

shadow-sm: 小型阴影、shadow: 中等阴影、shadow-md: 中等阴影(与 shadow 相同)、shadow-lg: 大型阴影、shadow-xl: 超大型阴影、shadow-2xl: 超超大型阴影、shadow-inner: 内部阴影、shadow-none: 无阴影

经典常用配置

大小类
w-{size}:设置元素宽度,例如 w-1/2 表示元素宽度为父容器宽度的一半。
h-{size}:设置元素高度,例如 h-16 表示元素高度为 16 像素。
max-w-{size}:设置元素最大宽度,例如 max-w-md 表示元素最大宽度为中等屏幕大小。
max-h-{size}:设置元素最大高度,例如 max-h-screen 表示元素最大高度为屏幕高度。
min-w-{size}:设置元素最小宽度,例如 min-w-0 表示元素最小宽度为 0。
min-h-{size}:设置元素最小高度,例如 min-h-full 表示元素最小高度为 100%。

文本类
text-{color}:设置文本颜色,例如 text-red-500 表示文本颜色为红色 500。
text-{size}:设置文本大小,例如 text-sm 表示文本大小为小号字体。
font-{family}:设置字体系列,例如 font-sans 表示使用无衬线字体。
font-{weight}:设置字体粗细,例如 font-bold 表示使用粗体字体。
leading-{size}:设置行间距,例如 leading-6 表示行间距为 6。

背景类
bg-{color}:设置背景颜色,例如 bg-gray-300 表示使用灰色背景。
bg-{image}:设置背景图片,例如 bg-cover 表示使用覆盖整个元素的背景图片。
bg-{position}:设置背景位置,例如 bg-center 表示将背景图像居中对齐。
bg-{size}:设置背景尺寸,例如 bg-auto 表示使用原始背景图像大小。

边框和轮廓类
border-{color}:设置边框颜色,例如 border-red-500 表示使用红色边框。
border-{size}:设置边框大小,例如 border-2 表示边框宽度为 2 像素。
border-{side}:设置边框位置,例如 border-l 表示只在元素左侧添加边框。
rounded-{size}:设置圆角大小,例如 rounded-full 表示使用完全圆角。

Typography
标准文本处理
三大字体家族
font-sans font-serif font-mono


字体磅值
font-thin
font-light
font-normal
font-bold
font-extrabold
font-black


强制字符串分成几行来显示
line-clamp-3
line-clamp-none
line-height
leading-4


列表处理
li 标签前面显示的序号样式(数字、黑点、无样式)
list-decimal
list-disc
list-none


文本
文本位置
text-center

文本颜色(斜杠后的数字表示透明度,透明度 0-100)
text-transparent
text-inherit
text-slate-50
text-blue-600/25

文本装饰
underline
overline
line-through
文本装饰对应的颜色
decoration-blue

文本装饰样式
decoration-solid
decoration-double
decoration-dotted
decoration-dashed
decoration-wavy


text overflow
truncate
text-ellipsis
text-clip

text-indent
indent-0

vertical-align
align-middle


背景 Background
三大 attachment
bg-fixed
bg-local
bg-scroll


clip(使用 clip-text 打造渐变文本!)
bg-clip-content
bg-clip-text

position(背景图聚焦位置)
bg-bottom
bg-top


background-repeat
bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
bg-repeat-round
bg-repeat-space

background-size
bg-auto
bg-cover
bg-contain


背景渐变色
如下代码表示:渐变色从左到右(to-r),左颜色为 cyan-500,右颜色为 blue-500
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>


Border
ring 一种浅色投影效果
ring-0
ring-white
ring-offset-0


Effects
box-shadow
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-none

透明度
opacity-0


过滤器 Filters
模糊 blur-0

快速阴影 drop-shadow-xl

变成黑白 grayscale

反色 invert

饱和度 saturate-50

背景模糊(常用!) backdrop-blur-sm


过渡与动画 Transition
全部过渡 transition-all

过渡时长(单位 ms) duration-1000

过渡曲线 ease-in-out

延后过渡(单位 ms) delay-1000


几个预制好的动画
animate-spin 加载环动画
animate-ping 新消息圆点跳动
animate-pulse 骨架屏加载脉冲
animate-bounce 弹跳


大小设置 sizing
宽度 w-0
按比例划分宽度 w-1/2

高度设置只需要把 w 改成 h 即可,剩余属性设置一致


间距 spacing
padding
p-0
px-0 x 表示左右
py-0 y 表示上下
px-px 表示左右间隔 1px

margin
-mt-8 距顶-8rem

专用于设置 space-between 间距的样式
space-x-0
space-y-0


弹性布局 Flexing&Grid
Flex 常用设置
flex
flex-col
flex-row
flex-wrap flex-nowrap
justify-center
items-center
grow-0
shrink-0


Grid 常用设置
grid-cols-4


其他
gap-x-px 左右间距 1px
content-center 设置 align-center 居中


布局 layout
容器 container
列布局 colums-2

怪异盒模型 box-border
标准盒模型 box-content

剩下的就是一些 display float clear overflow position 这些,都是直接原单词拿来就用。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

根据ELK官网指引部署ELK- ECK-Elastic-​ Kibana​-Learn-ELK-(一)

**Attention: 1、You need open the ELK official website and step by step to deploy . 2、If you copy my command ,you must check them if it not match your environment . 一、official website Elastic documentation | Elastic Check there. 二、 ECK简介…

逆向案例二十三——某租逆向,总是有映射源文件怎么办以及分析webpack代码

网址&#xff1a;aHR0cHM6Ly93d3cubWFvbWFvenUuY29tLyMvYnVpbGQ 抓取数据包发现载荷以及数据都进行了加密&#xff1a; 定位方法一&#xff1a;直接搜decrypt(,进入js文件&#xff0c;可以发现就是直接AES的解密方法&#xff0c;打上断点&#xff0c; 下方的d是解密函数 现在有…

AcWing4655.重新排序

【题目链接】4655. 重新排序 - AcWing题库 输入样例&#xff1a; 5 1 2 3 4 5 2 1 3 2 5输出样例&#xff1a; 4【代码及详细注释】 #include<bits/stdc.h> using namespace std; typedef long long ll; const int N1e510; ll a[N],b[N],s[N]; //a用于存储原本的数组 …

国税发票查验接口、电子增值税发票查验接口、数电票查验接口

翔云发票查验接口支持增值税发票管理系统开具发票的真伪&#xff0c;通过发票代码、号码、日期、金额、校验码四要素信息进行真伪的查验&#xff0c;支持返回全票面信息&#xff0c;API接口便于集成&#xff0c;可适用于多种应用场景。 发票查验接口python调用示例&#xff1a;…

MYSQL原理学习篇简记(二)

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是小周同志&#xff0c;25届双非校招生Java选手&#xff0c;很高兴认识大家 &#x1f4d5;学习出处&#xff1a;本文是学自小林coding (xiaolincoding.com) 网站的MYSQL图解篇 &#x1f525;如果感觉博主的文章还不错的…

在IIS中启用动态压缩

在iis管理中 对网站启用压缩可以节省带宽 提高网站的响应速度&#xff0c;默认情况下IIS启用多了“静态内容”的压缩。 下面就如何启用“动态内容压缩”说说方法&#xff1a; 1.打开iis中的网站&#xff0c;右侧管理项中显示有压缩 2、双击打开“压缩”&#xff0c;“静态内容…

cocos creator 实现spine局部换装

1 使用3.7.4版本 2 js代码 3 c Native层修改源码

太阳光光照试验耐久性老化试验使用太阳光模拟器系统

上海科迎法电气科技有限公司生产的太阳光模拟器系统主要应用于太阳能研究、材料研究、光伏组件测试、空间环境模拟器、植物生长研究、光热模拟等领域&#xff0c;主要表现特征为&#xff1a; 1. 太阳能研究&#xff1a;可用于模拟不同光照条件下太阳能电池的性能测试和研究&am…

学习python你必须弄懂的 Python、Pycharm、Anaconda 三者之间的关系

省流版 Python作为深度学习和人工智能学习的热门语言&#xff0c;学习一门语言&#xff0c;除了学会其简单的语法之外还需要对其进行运行和实现&#xff0c;才能实现和发挥其功能和作用。下面来介绍运行Python代码常用到的工具总结。 文中部分内容来自GPT&#xff0c;他已经是…

Quantum Temple借助Sui通过NFT推动再生旅游

从金融到艺术&#xff0c;从游戏到无线网络&#xff0c;各行各业都涌现出大量初创公司&#xff0c;利用区块链技术颠覆现状。说到旅游业&#xff0c;让人联想到拥挤的机场、快节奏的旅游和豪华游轮&#xff0c;可能看起来对区块链创新持守旧态度。一家初创公司认为现在是时候改…

ELK 日志分析系统(一)

一、概念 二、详解 2.1 Elasticsearch 核心概念 2.1.1 接近实时(NRT) 2.1.2 cluster集群 2.1.3 Node节点 2.1.4 index索引 2.1.5 类型&#xff08;type&#xff09; 2.1.6 文档&#xff08;document) 2.1.7 分片和副本(shards & replicas) 2.2 Logstash主要组件 …

Navicat Premium 16 for Mac/Win:数据库管理的全能之选

在数字化时代&#xff0c;数据库管理已成为各行各业不可或缺的一环。而Navicat Premium 16作为一款功能强大的数据库管理软件&#xff0c;无疑为数据库管理员和开发者提供了高效、便捷的解决方案。 Navicat Premium 16支持多种主流数据库系统&#xff0c;无论是MySQL、Postgre…

【蓝桥杯】2024年第15届真题题目

试题 A: 握手问题 本题总分&#xff1a; 5 分 【问题描述】 小蓝组织了一场算法交流会议&#xff0c;总共有 50 人参加了本次会议。在会议上&#xff0c; 大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进 行一次握手&#xff08;且仅有一次&a…

初识SpringMVC(SpringMVC学习笔记一)

1 、还是熟悉的配方&#xff0c;先创建一个父Maven项目&#xff08;忘记怎么创建项目了就去前面翻笔记&#xff09;&#xff0c;导入通用的配置依赖 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instan…

基于Java社团管理系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

【pycharm】运行完程序之后如何查看变量情况

【pycharm】运行完程序之后如何查看变量情况 Matlab运行完代码可以在工作区查看变量以及变量值&#xff0c;对于python也是可以的 pycharm运行完程序之后如何查看变量情况方法&#xff1a;选择edit configurations 把run with python console勾上 然后运行完代码就可以在下面查…

水离子雾化壁炉与酒店会客厅的氛围搭配

水离子雾化壁炉与酒店会客厅的氛围搭配可以营造出舒适、温馨和现代化的氛围&#xff0c;以下是一些建议&#xff1a; 焦点装饰&#xff1a;将水离子雾化壁炉设计成会客厅的焦点装饰物&#xff0c;使其成为客人进入会客厅后第一眼的吸引点。选择设计独特、现代化的壁炉造型&…

微信公众号迁移申请函怎么填写?

公众号迁移的好处有哪些&#xff1f;迁移后原公众号还能用吗&#xff1f;公众号迁移的好处有很多哦&#xff01;比如可以获得更多权限功能、公司变更或注销时可以保证账号的正常使用、收购账号后可以改变归属权或使用权等等。不过要注意的是&#xff0c;迁移后原公众号就不能再…

量化过程信息损耗分析(MATLAB)

MATLAB代码 clear_all; Mrand(5,5)*100;% 假设M是待转换的矩阵 a min(M(:)); b max(M(:));% 将M映射到[0, 255] M_mapped functionA(M, a, b); M_mapped_floorfloor(M_mapped); % 将M_mapped恢复到原始范围 M_original functionB(M_mapped_floor, a, b);disp(M); disp(M_m…

DNF手游攻略:2024新手攻略大全

在《DNF手游》的世界中&#xff0c;前期阶段对于新手玩家来说至关重要。以下是一份综合整理的新手攻略&#xff0c;帮助玩家快速适应游戏并取得进展。 1. 角色建立策略&#xff1a; 在前期&#xff0c;建议玩家建立3个角色&#xff0c;包括1个大号和2个小号。大号可以根据个人喜…