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

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

Tailwind教程2 - 基础样式相关推荐

Tailwind教程1 - 开始使用
Tailwind教程1 - 开始使用 Tailwind是一款现代样式框架.本教程旨在循序渐进的教会大家从安装到完全使用tailwindcss搭建页面.我们开始吧! Tailwind是什么? tailw ...
style 字体加粗_第9篇 Qt Quick入门教程之基础（九）文本显示和字体
导语文本显示是界面开发必不可少的内容,在Qt Quick模块中提供了 Text 项目来进行文本的显示,其中可以使用 font 属性组对文本字体进行设置.这一篇我们来看看它们的具体使用. 使用字体就 ...
Vue教程_基础(一)
目录章节地址 Vue教程_tips https://blog.csdn.net/weixin_46349544/article/details/124082287 Vue教程_基础(一) http ...
2020计算机一级考试教程,全国计算机等级考试一级教程--计算机基础及MS Office应用(2020年版)...
全国计算机等级考试一级教程--计算机基础及MS Office应用(2020年版) 出版时间:2019年12月定价:45.00 I S B N :9787040531695 所属分类: 考试 &g ...
小程序看练代码02--模板、封装模板，include模板，wxs，全局样式，导入样式，微信基础样式库，hover-class等，过渡动画，空格使用，图片懒加载，ico图标，图像vh居中，矢量库，表单
1.定义及使用模板模板没有自己的js,也没有自己的监听,而是直接使用页面的js和监听.请更倾向去使用组件 <text>模板的使用</text> <!--模板的定义,要给 ...
Axure RP8 教程：基础元件
Axure小白的福利又来了,本教程包含基础元件的介绍和操作,通过对这部分的学习,就可以掌握Axure元件的基本使用方法. 希望大家边学边操作,学习效果更佳哦. Axure RP8 教程 :基础元件的使 ...
[数据与分析可视化] D3入门教程1-d3基础知识
d3.js入门教程1-d3基础知识文章目录 d3.js入门教程1-d3基础知识 1 HTML介绍 1.1 什么是HTML? 1.2 自定义文档样式CSS 1.3 构建svg图形 2 d3绘图入门 2 ...
CSS基础样式属性设置
文章目录 css基础样式与属性设置一.宽和高二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...
python向量计算库教程_NumPy库入门教程：基础知识总结
原标题:NumPy库入门教程:基础知识总结视学算法 | 作者知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...

Tailwind教程2 - 基础样式

Tailwind教程2 - 基础样式

背景

文本

长宽

边距

圆角

边框

阴影

字体

总结

Tailwind教程2 - 基础样式相关推荐

最新文章

热门文章