网站建设不能使用的广告违禁词,国外 网站 欣赏,展厅设计施工一体化,wordpress po mo1. 布局类
container#xff1a;创建一个最大宽度的容器#xff0c;用于页面布局。 flex#xff1a;使元素成为弹性容器。 grid#xff1a;使元素成为网格容器。 mx-auto#xff1a;使元素水平居中#xff08;通常需要设置宽度#xff09;。
2. 间距类#xff08;Mar…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. 示例
div classcontainer mx-auto div classbg-white shadow-md rounded p-4 w-full h1 classtext-2xl font-bold text-centerWelcome to Tailwind CSS/h1 p classtext-lg mt-3This is a simple example of Tailwind CSS./p /div
/div
