Tailwind Notes 解释+例子

小熊对对碰

已于 2024-03-26 06:11:16 修改

阅读量822

点赞数 15

分类专栏： Web 文章标签： css 前端 javascript

于 2024-03-22 04:11:23 首次发布

本文链接：https://blog.csdn.net/weixin_43561635/article/details/136925870

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在网页开发中使用TailwindCSS的Flexbox布局组件，如flex-col、justify-between、items-center等，以及如何配合其他样式类如margin、padding和文本样式，实现响应式和自适应的设计。同时，文章还展示了如何在布局文件中整合这些类以优化页面结构。

摘要由CSDN通过智能技术生成

记录我目前用到的一些。

Flex

flex - 使用Flexbox布局，这是一个非常灵活的布局模式，用于在容器内部以动态的方式对子项进行排列。
flex-col - 这个类使得 Flexbox 容器内的子元素沿着垂直方向排列（列布局），而不是默认的水平方向。
justify-between - 在Flexbox布局中，这个类使容器中的子项之间的间距平均分布，首尾子项贴紧容器边界。
items-center - 在Flexbox布局中，这个类使得容器内的子项在交叉轴（默认为垂直方向）上居中对齐。
gap-2 - 在Flexbox或Grid布局中，设置容器中子项之间的间隙为2个尺寸单位。
flex-wrap - 允许Flex容器内的子项在必要时换行。

Example:
让两个东西水平排列，一个居左一个居右。

<div className="flex justify-between">
   <div>box1</div>
   <div>box2</div>
</div>

flex-1

flex-1 - 用于在弹性布局（Flexbox）中设置一个元素的弹性。

flex-1相当于在传统的CSS中设置flex: 1;。这个设置告诉元素要占据可用空间的一部分，具体而言，它会使元素能够伸展（grow）和收缩（shrink），以适应父容器的剩余空间。

这个类的组成部分如下：

flex-grow设置为1，意味着这个元素可以增长填满一些额外的可用空间。如果有多个兄弟元素同时设置了flex-grow，它们会根据各自的flex-grow值的比例来分配额外空间。
flex-shrink也默认设置为1，这表明如果容器空间不足，该元素可以缩小到小于其原始大小。
flex-basis默认为0%，意味着在分配额外空间之前，元素的起始大小忽略其内容大小。
简而言之，使用flex-1的元素会平等地占据父容器中的剩余空间，与其他也设置了flex-1的兄弟元素共享空间。如果容器的空间不足以容纳所有子元素的基础大小，这些元素也会按比例缩小。这在需要创建灵活布局的时候非常有用，特别是当你想要元素根据可用空间自动调整大小时。

Margin and padding

mb-2 - 设置元素的下外边距（margin-bottom）为2个尺寸单位。
mt-2 - 设置元素的上外边距（margin-top）为2个尺寸单位。
mr-2 - 设置元素的右外边距（margin-right）为2个尺寸单位。
ml-2 - 设置元素的左外边距（margin-left）为2个尺寸单位。
mx-auto - 设置元素的左右外边距为自动（margin-left: auto; margin-right: auto;），这使得元素在水平方向上居中。
px-2 - 设置元素的左右内边距（padding）为2个尺寸单位。
py-2 - 设置元素的上下内边距（padding）为2个尺寸单位。
pb-2 - 设置元素的下内边距（padding-bottom）为2个尺寸单位。
shadow-md - 应用中等强度的阴影效果。

Text

text-4xl：设置文本大小，Tailwind CSS提供了从text-xs（非常小）到text-9xl（极大）的一系列字体大小选项。
font-bold：设置文本的粗细。使文本比正常的更加粗重。
tracking-tighter：减少字母之间的间距，即字距。
leading-loose - 设置文本的行高，让文本之间的空间感更加宽松，提高可读性。通常是相对于字体大小的1.75倍。例如，如果文本的字体大小是16px，使用leading-loose可能会将行高设置为28px（16px * 1.75 = 28px）。
text-white：设置字体颜色为白色。

Button / Tags / 🏷️ labels

Example:

.btn {
  @apply bg-slate-200 px-4 py-2 rounded-md font-semibold hover:scale-105 transition;
}

在Tailwind CSS中，使用@apply指令可以在CSS文件中应用Tailwind的实用工具类，这使得可以在传统的CSS结构中利用Tailwind CSS的强大功能。

bg-slate-200：设置按钮的背景颜色为浅灰色。
rounded-md, rounded-lg, rounded-full ：应用圆角边框于按钮。
font-semibold：设置按钮内文本的字重为半粗体（semibold）。
hover:scale-105：当鼠标悬停在按钮上时，按钮将缩放到原大小的105%。
transition：应用过渡效果，使得按钮在状态变化（例如，鼠标悬停时的缩放）时能有一个平滑的视觉过渡效果，而不是突变。

<div className="flex text-sm gap-2 flex-warp">
   {categoriesData && categoriesData.map((category) => (
       <Link className="px-4 py-1 rounded-md bg-slate-800 text-white" key={category.id} href = {`/categories/${category.name}`}>{category.name}</Link>
   ))}
</div>

Layout

min-h-screen - 设置元素的最小高度为视口的高度，确保即使内容不足时，容器也会至少占满整个屏幕的高度。
flex-1 - 这个类在 Flexbox 布局中，允许 main 元素伸展以占用可用空间，使其成为可伸缩的。这意味着它会填充除了 Header 和 Footer 之外的空间。
w-full - 设置元素宽度为100%，即其父元素的全宽。
max-w-4xl - 设置元素的最大宽度为 4xl（在 Tailwind CSS 的默认配置中，这通常相当于 56rem 或 896px），用于保持内容在大屏幕上的可读性。

layout 文件常见设置：

    <html lang="en">
      <body className={inter.className}>
        <div className="lg:max-w-[900px] lg:px-16 mx-auto py-8 shadow-xl min-h-screen flex flex-col px-8">
          <Navbar />
          <div className="flex-auto">{children}</div>
          <Footer />
        </div>
      </body>
    </html>

这个布局保证了页面内容（children）在导航栏和页脚之间垂直居中，并且在大屏幕和小屏幕上都保持良好的布局效果。通过使用 flex-1，main 元素能够灵活地扩展其高度以填充导航栏和页脚之间的空间，确保页脚处于视口底部，即使内容不足以填满屏幕。

Image

<div className="w-full h-72 relative">
   <Image src={thumbnail} alt={title} fill />
</div>

小熊对对碰

关注

15
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
Tailwind Notes 解释+例子

应用了 Flexbox 布局，这是一种 CSS 布局技术，旨在提供一种更有效的方式来排列、对齐和分配在容器内项目之间的空间，即使它们的大小未知或是动态变化的。- 设置元素的下外边距（margin-bottom）为8个尺寸单位，创建与下方元素的空间。- 设置元素的最小高度为视口的高度，确保即使内容不足时，容器也会至少占满整个屏幕的高度。- 设置元素的上外边距（margin-top）为8个尺寸单位，创建与上方元素的空间。）在导航栏和页脚之间垂直居中，并且在大屏幕和小屏幕上都保持良好的布局效果。
复制链接

扫一扫