Tailwind 猫猫都能懂的小方块效果

yueran
129 阅读4分钟

背景色彩 (bg-color)

借由 bg-{颜色}-{深浅度} 这个功能，我们可以设定 / 改变区块的背景颜色，例如 bg-black 功能是将背景设定为黑色。

其实，Tailwind 所定义出来的颜色都是共用的，你可以自己新增颜色。 所以只要你新增，就能够把颜色用在所有可以用的地方。

以下是预设可以使用的背景色彩功能：

image.png

注意：还有些颜色不具深浅度，如白色 (bg-white)、黑色 (bg-black)，透明 (bg-transparent)

image.png

宽度 ( width )

藉由 w-{宽度} 这个功能，我们可以设定 / 改变区块宽度，例如 w-full 功能是将宽度设为 100% 。

以下是预设可以使用的宽度功能：

  • w-0
  • w-px
  • w-1
    ...
  • w-96
  • w-1/2
  • w-1/3
    ...
  • w-full
  • w-screen

接着我们把方块的宽度设定为w-40，也就是相当于 10rem，但是这次却变成字没有置中，我们快加上之前学过的文字置中 text-center 吧：

image.png

高度 ( height )

透过 h-{高度} 这个功能，我们可以设定 / 改变区块的高度，例如 h-1/2 功能是将高度设为1/2，也就等同于 50% 。

以下是预设可以使用的高度功能：

  • h-0
  • h-px
  • h-1
    ...
  • h-96
  • h-1/2
  • h-1/3
    ...
  • h-full
  • h-screen

接着我们用 h-40 来增加高度，把方块变成正方形：

image.png

边框宽度 ( border-width )

透过 border-{方向}-{边框宽度} 这个功能，我们可以设定 / 改变边框宽度，例如 border-t-4 功能是将上边框宽度设定为 4px。

以下是预设可以使用的边框宽度功能：

  • 全部边框

    • border-0
    • border
    • border-2
    • border-4
    • border-8

  • 上边框

    • border-t-0
    • border-t
      ...
    • border-t-8

  • 右边框

    • border-r-0
      ...
    • border-r-8

  • 下边框

    • border-b-0
      ...
    • border-b-8

  • 左边框

    • border-l-0
      ...
    • border-l-8

接着我们用 border-8 来增加一个宽度为 8px 的边框：

image.png

边框色彩 ( border-color )

透过 border-{色彩}-{深浅度} 这个功能，我们可以设定边框的色彩，例如 border-pink-500 功能是将边框色彩设定成粉色。(#EC4899)

颜色呢，跟前面一样，
以下是预设可以使用的边框色彩功能： image.png

注意：还有些颜色不具深浅度，如白色 ( border-white)、黑色 ( border-black)，透明 ( border-transparent)

接着我们用 border-blue-300 把边框染上一个适合它的颜色： image.png 总觉得哪里怪... 啊！我知道了！不够圆！
四个边角太尖了难怪不好看，应该要像小米的新 logo 一样...

image.png

圆角 ( border-radius )

透过 rounded-{方向}-{圆角程度} 这个功能，我们可以设定区块的圆角程度，例如 rounded-r-xl 功能是把区块右侧的圆角程度设为 0.75rem。

以下预设是可以使用的方向：

  • (全部)
  • t (上)
  • tr (右上)
  • r (右)
  • br (右下)
  • b (下)
  • bl (左下，不是 boy's love)
  • l (左)
  • tl (上左)

以下是预设可以使用的圆角程度：

  • rounded-none
  • rounded-sm
  • rounded
  • rounded-md
  • rounded-lg
  • rounded-xl
  • rounded-2xl
  • rounded-3xl
  • rounded-full

我们用 rounded-3xl 来把方块变得圆润一点吧：

image.png

老板觉得这样太单调了没有质感啦 (哭

他说要变成 IG logo 的那种感觉，
那不就要渐层了吗... 可是我用 Tailwind ...
做起来也是很简单啦！

背景图片 ( background-image )

透过 bg-gradient-{渐层方向} 这个功能，我们可以设定背景图片为渐层，且指定渐层的方向，例如 bg-gradient-to-r 功能是把背景渐层方向设为由左至右。

以下是预设可以使用的渐层方向功能：

  • bg-gradient-none
  • bg-gradient-t
  • bg-gradient-tr
  • bg-gradient-r
  • bg-gradient-br
  • bg-gradient-b
  • bg-gradient-bl
  • bg-gradient-l
  • bg-gradient-tl

我们这个只有设定渐层的方向，没有设定颜色，所以等等要用这个搭配其它的功能一起使用！

渐层色标 ( gradient-color-stops )

透过 {标地}-{颜色}-{深浅度} 这个功能，我们可以设定渐层的颜色，需搭配背景图片的渐层方向使用，例如 bg-gradient-to-r from-black 功能是把背景渐层方向设为由左边的黑色，至右边的透明。

以下是预设可以使用的标的功能：

  • from (起始点)
  • via (中继点)
  • to (结束点)

颜色则是跟前面都一样：

image.png

注意：还有些颜色不具深浅度，如白色 ( {from,via,to}-white)、黑色 ( {from,via,to}-black)，透明 ( {from,via,to}-transparent)

我们用bg-gradient-to-tl、from-yellow-300、via-red-500和 to-indigo-500 来把方块变成像 IG logo 的颜色吧：

image.png

成品

<div class="h-40 w-40 rounded-3xl border-8 border-blue-300 
bg-neutral-900 text-center text-white
bg-gradient-to-tl from-yellow-300 via-red-500 to-indigo-500">Lorem ipsum dolor</div>

自己打开实践一下

avatar
文章
阅读
粉丝