tailwind--tailwind CSS is a utility-first CSS framework for creating custom interfaces quickly

Tailwind是一个PostCSS插件,专注于提供可定制的预建CSS类,简化开发流程。它通过cssnano优化CSS大小,使用Autoprefixer支持多浏览器兼容性。开发者可以不必命名复杂类,直接在HTML中编写样式,提高效率。尽管学习曲线较陡,Tailwind提供了丰富的响应式布局和定位选项,如静态、固定、相对和绝对定位。然而,它可能在浏览器代码查看时不够直观。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

tailwind 特点

  • tailwind是PostCSS的一个插件。

  • 使用PostCSS的插件cssnano等工具缩小 CSS,并使用Brotli压缩 CSS,减小文件大小。更多请参考optimization

  • 使用PostCSS的插件Autoprefixer实现对各版本浏览器的支持。更多请参考Autoprefixer

  • 不必命名很复杂的类。

  • 可以在不离开HTML的情况下编写CSS,有点像编写内联CSS,不必频繁切换文件,节省大量时间和精力。

  • 提供很大的自定义空间,虽然tailwind css带有内置的默认配置,但是可以从配置文件中覆盖它,手动定义任何样式。

  • 提供pre-build classes,可以轻松构建复杂的响应式布局。

参考文章

tailwind 不足

  • 浏览器代码时,不是特别直观

  • 有learining curve,需要一些时间才能掌握。

tailwind basestyle

  1. border

*,
::before,
::after {
  box-sizing:border-box; //!!!
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

!!!官网没有这项配置,但使用中发现这一项也是默认的。(在Vue框架下)

  1. margin

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
  1. button

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
  1. img

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
  1. list

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
  1. responsive layout

Breakpoint prefixer

container

  1. postion

  • static(normal flow/ignoring any offsets/not for absolutely positioned element)
  <div class="h-96 w-16 bg-blue-200"></div>
  <div class="static w-48 h-48 left-3 top-3 bg-red-800">
    <div class="absolute bottom-0 right-0 h-16 w-16 bg-green-800"></div>
  </div>
  • fixed(position related to the browser window/calculating any offests relative to the viewpoint/for absolutely positioned element )
  <div class="h-96 w-16 bg-blue-200"></div>
  <div class="fixed w-48 h-48 left-3 top-3 bg-red-800">
    <div class="absolute bottom-0 right-0 h-16 w-16 bg-green-800"></div>
  </div>

  • relative(normal flow/ignoring any offsets/ for absolutely positioned element)
  <div class="h-96 w-16 bg-blue-200"></div>
  <div class="relative w-48 h-48 left-3 top-3 bg-red-800">
    <div class="absolute bottom-0 right-0 h-16 w-16 bg-green-800"></div>
  </div>
  • absolute(outside the normal flow/calculating any offsets relative to the nearest parent other than `static`)
  • sticky
<div>
    <dl>
      <dt class="sticky top-0 bg-blue-200">A</dt>
      <dd>Andrew W.K.</dd>
      <dd>Apparat</dd>
      <dd>Arcade Fire</dd>
      <dd>At The Drive-In</dd>
      <dd>Aziz Ansari</dd>
    </dl>
    <dl>
      <dt class="sticky top-0 bg-blue-200">C</dt>
      <dd>Chromeo</dd>
      <dd>Common</dd>
      <dd>Converge</dd>
      <dd>Crystal Castles</dd>
      <dd>Cursive</dd>
    </dl>
    <dl>
</div>

  1. offset

Use the {top|right|bottom|left|inset}-{size} utilities to set the horizontal or vertical position of a positioned element.

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">02</div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute top-0 right-0 h-16 w-16 ...">03</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 left-0 w-16 ...">04</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-0 ...">05</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">06</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 left-0 h-16 w-16 ...">07</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 right-0 h-16 w-16 ...">09</div>
</div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值