TailwindCSS常用类大全

这篇具有很好参考价值的文章主要介绍了TailwindCSS常用类大全。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

经典常用配置

大小类
  • 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


意大利体
italic
not-italic


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


字符变体(不同的变体呈现不同的字符状态)
ordinal
slashed-zero
oldstyle-nums


letter-spacing
tracking-tight
tracking-normal
tracking-wide


强制字符串分成几行来显示
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

最小宽度
min-w-min
min-w-max
min-w-full

最大宽度
max-w-sm
max-w-lg

高度设置只需要把 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 这些,都是直接原单词拿来就用,这里不做介绍文章来源地址https://www.toymoban.com/news/detail-756901.html


到了这里,关于TailwindCSS常用类大全的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 tailwindcss的使用

    首先安装依赖: 然后vite.config.ts中 引入 终端执行: 会在项目根目录下面生成两个文件  tailwind.config.js postcss.config.js 最后在main.js或者main.ts中引入css样式   import \\\'uno.css\\\'   完成以上步骤就可以在标签中直接使用 tailwind 提供的相关类名了。 VScode 安装插件  Tailwind CSS IntelliSen

    2024年02月11日
    浏览(36)
  • Vue+Vue Router+TailwindCss+Daisyui部署

    一、构建Vue项目 npm init vue@latest cd your-project-name npm install npm run dev  二、设置IDEA JS版本  三、安装Tailwindcss Install Tailwind CSS with Vite - Tailwind CSS 在文件中添加所有模板文件的路径 tailwind.config.js 将 Tailwind 指令添加到您的 CSS 中 @tailwind 将Tailwind 每个层的指令添加到您的文件中。

    2024年02月13日
    浏览(30)
  • uni-app 使用 tailwindcss 兼容小程序

    在小程序中常规的方式安装taiwindcss会在小程序中报错,所以需要用兼容的写法安装。这里介绍使用vue-cli创建的uniapp项目,按我的步骤操作就好。 这步会生成tailwindcss.config文件,如果没有生成,也可以自己手动在根目录创建 主要是修改plugins部分,加入以下代码,加在require

    2024年02月15日
    浏览(62)
  • vue - tailwindcss 和 element-ui 冲突处理

    在使用tailwindcss 情况下,有时候会导致element-ui的样式失效最常见的是butten按钮的样式就变了 其实情况也比较简单,也就是先引入tailwindcss 再引入element-ui 这样element-ui就会覆盖掉tailwindcss 但是这种情况又会导致tailwindcss 部分样式出不来 所以在保证tailwindcss的情况下对于element覆

    2024年02月11日
    浏览(45)
  • uniapp微信小程序安装tailwindcss编译失败的解决思路

    今天在uniapp上安装tailwindcss后, 微信开发工具一直报wxss编译失败的错:如下图。 想来应该是Postcss没有把tailwindcss编译成css,所以app.wxss识别不了导致的问题。网上找了一圈, 也没有太好的办法。 后来想了个不太灵活的办法,既然识别不了,可以手动转换成css在引入到app里面

    2024年02月09日
    浏览(61)
  • 解决Naive UI和Tailwindcss样式覆盖问题【日常记录,可供参考】

    当项目中同时使用到 Naive UI 和 Tailwindcss 时,出现了样式覆盖问题, Tailwindcss 样式直接将 Naive UI 样式覆盖导致无法正常使用 :: 解决方案 方式一 在 main.js / main.ts 文件中添加以下代码,主要原理是需要在应用初始化之前将 naive-ui-style 提前注入到应用当中,避免被覆盖 方式二

    2024年02月06日
    浏览(49)
  • vue3 + typescript + vite + naive ui + tailwindcss + jsx 仿苹果桌面系统

    基于 vue3.x + typescript + vite + naive ui + tailwindcss + jsx + vue-router + pinia,项目使用 tsx 作为模版输出,全程没有使用vue提供的SFC, 仿macos桌面前端项目,开源免费模版,希望减少工作量和学习新技术,希望能够帮助大家; 本人主要是后端的开发,对于前端我也是刚入门的小白,有很

    2024年02月07日
    浏览(40)
  • vue 移动端开发vw适配方案&rem适配方案 + vant框架 + unocss|tailwindcss

    写在前面的话:看了这篇文章,有些东西名词啥的不懂的,或者有疑问的推荐百度,因为写的太多真的显得很啰嗦! 目前移动端适配,在市面上主流适配方案无非就两种,rem方案和vw方案。这些方案,就可以自动适配不同移动端屏幕尺寸动态缩放。其实他的适配,你可以理解

    2024年02月12日
    浏览(42)
  • HTML5和CSS3七CSS3四

    代码下载地址 Transision过渡动画是从一个状态到另一个状态,而Animation动画可以有多个关键帧 animation-name:设置动画ID animation-duration:设置动画总时长 animation-timing-function:设置动画时间函数,同过渡动画 animation-iteration-count:设置动画播放次数,默认1次,可以是具体次数也可

    2023年04月23日
    浏览(55)
  • html+css3 补充学习

    1.1 strong 着重阅读,也可以理解为加粗效果 2.1 空格 2.2 一个中文宽度实体 例子 标签、类、id选择非常常用,前边的文档写过了,不在记录了 1.1 后代选择器 子标签 子子标签 子子子标签都是后代选择器 1.2 子代选择器 子代选择器只选择 下边1层 更多写法 1.3 兄弟选择器 相邻兄

    2024年01月20日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包