Tailwind教程2 - 基础样式

最新推荐文章于 2024-04-08 07:30:20 发布

wzy1935

最新推荐文章于 2024-04-08 07:30:20 发布

阅读量2.9k

点赞数 2

分类专栏： tailwind 文章标签： css html

本文链接：https://blog.csdn.net/wzy1935/article/details/125002352

版权

tailwind 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Tailwind教程2 - 基础样式

这节讲一讲日常经常使用的基础样式，来实现一个文件夹的样式的标签页：

在这里插入图片描述
基础模板如下：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="p-10">
        <button>Page 1</button>
        <button>Page 2</button>
        <div>
            <!-- content... -->
        </div>
    </div>
</body>

</html>

接着把上述代码复制成html到浏览器运行。刚打开页面，你可能会纳闷，按钮怎么变成这样了？

在这里插入图片描述
这是因为tailwind会清除默认样式，这样也能保证页面在不同浏览器的显示一致。好了，开始美化吧：

背景

我们先给Page 1 Page 2 这两个按钮上色：

<button class="bg-yellow-500">Page 1</button>
<button class="bg-yellow-400">Page 2</button>

使用bg来添加背景颜色。后面分别跟上颜色和深度。默认的支持颜色如下：

在这里插入图片描述
这里我们给按钮添加颜色，其实就是按钮的背景色。例如Page 1使用的是bg-yellow-500，就是深度500的黄色。

文本

为文本添加颜色的语法是一样的，把bg换成text即可，例如text-red-800。我们给文本设置text-white将其设为白色。现在的效果：

在这里插入图片描述
文本还可以设置大小。tailwind大小一般分为xs，sm，md，lg，xl，2xl等，依次从小到大。比如，大号字体可以使用text-lg。

长宽

现在让这两个按钮看起来像按钮吧。

使用w控制宽度，h控制高度，后面跟上长度即可。这里我们只想固定两个按钮的宽度，所以使用w-32将宽度设成32。tailwind的长度单位是0.25rem，就是说w-32的宽度为8rem。效果：

在这里插入图片描述

边距

使用p设置内边距，m设置外边距。后面跟上长度。例如，想把内边距设置为2可以写作p-2。想要设置局部边距时，可以在后面再跟上一个字母。x表示水平，y表示垂直，t、b、l、r分别表示上下左右，例如px-5，pt-3等。这里我想把按钮高度加大一点，所以要增大y轴内边距，因此使用的是py-2。效果：

在这里插入图片描述
我们再给下面的div设置长宽和颜色，作为文件夹的主体。现在的代码：

<button class="bg-yellow-500 text-white w-32 py-2">Page 1</button>
<button class="bg-yellow-400 text-white w-32 py-2">Page 2</button>
<div class="h-64 w-96 bg-yellow-300">
	<!-- content... -->
</div>

效果如下：

在这里插入图片描述

圆角

我们已经快完成了！只差给按钮添加圆角了。使用rounded添加圆角，后面跟上大小（sm，md，lg等）。这里我选的是中等大小，即md。

因为只给左上右上角添加圆角，所以使用了rounded-tl-md和rounded-tr-md分别表示左上（top-left）和右上（top-right）：

<button class="bg-yellow-500 text-white w-32 py-2 rounded-tl-md rounded-tr-md">Page 1</button>
<button class="bg-yellow-400 text-white w-32 py-2 rounded-lt-md rounded-tr-md">Page 2</button>
<div class="h-64 w-96 bg-yellow-300">
    <!-- content... -->
</div>

现在的效果就和一开始一致了。

边框

还有一些属性在上面的例子里没有提及，但也很常用。使用border添加边框，后面跟上边框厚度。例如，border-2表示厚度为2的边框。不加数字则默认为1。

边框也可以设置颜色。语法和前面一致，例如border-green-600会将边框设置为深度600的绿色。

示例：

<button class="border-2 border-green-600">test</button>

在这里插入图片描述

阴影

使用shadow添加盒阴影。后面跟上大小。示例：

<button class="shadow-md p-2">test</button>

在这里插入图片描述

字体

字体使用font设置。和文本text不同，font主要用于设置字体家族和特殊样式。例如，font-mono能把字体设置为等宽字体，font-bold会把字体设置为粗体。示例：

<p class="font-serif font-bold">this is a text.</p>

在这里插入图片描述

总结

我们介绍了tailwind里最常用的样式属性：

背景：bg
文本：text
长宽：w h
边距：p m
圆角：rounded
边框：border
阴影：shadow
字体：font

熟练使用它们，你就能写出绝大多数组件的样式了！不过要注意的是，上文中的介绍只算简介，完整的使用方式还请参考官方文档。顺便提示一下，通过上面这些属性已经可以把上一篇教程的三个按钮样式完全实现了。读者不妨在不翻上篇教程的情况下自行分析，试一试把下面的样式完成：

在这里插入图片描述

wzy1935

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Tailwind教程2 - 基础样式

Tailwind教程2 - 基础样式这节讲一讲日常经常使用的基础样式，来实现一个文件夹的样式的标签页：基础模板如下：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn
复制链接

扫一扫