Tailwind CSS常见用法

1. 布局类

container:创建一个最大宽度的容器,用于页面布局。

flex:使元素成为弹性容器。

grid:使元素成为网格容器。

mx-auto:使元素水平居中(通常需要设置宽度)。

2. 间距类(Margin 和 Padding)

m-4:为元素添加1rem的外边距。

p-2:为元素添加0.5rem的内边距。

mt-3:为元素的上边距添加1rem。

pb-2:为元素的下内边距添加0.5rem。

3. 尺寸类(宽度和高度)

w-full:宽度为100%。

h-screen:高度为屏幕高度。

w-1/2:宽度为容器宽度的50%。

h-20:高度为1.25rem(根据默认设置,具体值可能因配置而异)。

4. 字体和文本类

text-xl:字体大小为大号。

font-bold:字体加粗。

text-center:文本居中。

text-red-500:文本颜色为红色调的500。

5. 边框类

border:添加默认边框宽度的边框。

border-gray-300:边框颜色为灰色调的300。

rounded:默认圆角。

rounded-lg:较大圆角。

6. 阴影类

shadow:添加默认阴影效果。

shadow-md:中等阴影。

shadow-lg:大阴影。

7. 响应式类

Tailwind CSS支持通过添加断点前缀来实现响应式设计,如:

md:text-lg:在中等屏幕及以上,文本字体大小为大号。

lg:w-1/4:在大屏幕及以上,宽度为容器宽度的25%。

8. 自定义类

Tailwind CSS允许在tailwind.config.js配置文件中自定义样式,如颜色、字体大小、边框宽度等。然后,这些自定义样式可以在HTML中通过类名引用,如text-custom-size。

9. 示例

html 复制代码
<div class="container mx-auto">  
  <div class="bg-white shadow-md rounded p-4 w-full">  
    <h1 class="text-2xl font-bold text-center">Welcome to Tailwind CSS</h1>  
    <p class="text-lg mt-3">This is a simple example of Tailwind CSS.</p>  
  </div>  
</div>
相关推荐
toooooop81 分钟前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_7 分钟前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy9 分钟前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全15 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101218 分钟前
[前端]1.html基础
前端·笔记·学习·html
白水清风27 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy28 分钟前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全37 分钟前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
小天呐1 小时前
qiankun 微前端接入实战
前端·js·微前端
周航宇JoeZhou1 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台