Tailwind CSS是一个著名的CSS框架,它最大的特点是使用声明式的方式来为页面添加样式。它改变了传统对于应用页面样式的思路,很多人可能不是很适应这种风格来定义页面样式,尤其是已经适应传统在wiki定义样式方式的编辑者。但是,一旦接受了Tailwind这种设定,构建复杂版式的页面会变得乐趣无穷。

Tailwind的主要优点是:

  • 声明式的响应式class,页面适配手机和桌面不再是个痛苦的事情。
  • 使用CSS3的布局系统,抛弃table,排版更为灵活容易。
  • 使用规范的单位,很容易统一站点里的间距、字号等风格。

应用原理

Tailwind本身定义了相当多的class名称,每个class都有对应的样式。借助于常用的<div>标签(或者其他mediawiki允许使用的标签),可以在class属性上写上想要的名称,便可以实现对div应用样式效果。

而你要做的,就是熟练掌握各名称及其对应的样式效果。

为站点启用Tailwind

默认情况下,站点是没有启用Tailwind功能的,需要管理员前往驾驶室页面,在机长室中可以开启。

灰机的Tailwind由于需要对现有皮肤样式的兼容,所以有一定的修改,但整体上不影响使用。

配置

由于Tailwind CSS的默认样式与灰机皮肤中使用的Bootstrap样式冲突,所以会默认加载了以下Tailwind CSS配置

tailwind.config = {
    corePlugins: { preflight: false, container: false },
    theme: {
        screens: {
            sm: '576px',
            md: '768px',
            lg: '992px',
            xl: '1200px',
            '2xl': '1366px',
            '3xl': '1600px',
        },
    },
};

如需自定义配置,请在自己站点的Common.js中,添加以下代码

window.tailwindconfig = {
    ...
}

注意:这里添加的是tailwindconfig,而不是tailwind.config。这是由于脚本加载顺序的缘故,当Common.js加载到页面时,Tailwind CSS还没有加载,导致tailwind对象不存在,无法使用tailwind.config进行配置。当加载Tailwind CSS完成后,会检查是否存在tailwindconfig,如果存在则使用tailwindconfig作为配置(此时不会加载默认配置,如需包含请复制一份),否则使用上面的默认配置。

除此之外还有其他样式会发生冲突,发生冲突时,可以使用tailwind的important语法(在class名之前加!),例如!text-black

已知冲突

以下为目前已知的因为huiji自身样式表导致冲突的部分

class名称 冲突说明
hidden huiji的样式表中定义该class的样式为display: none !important,导致Tailwind的切换display无法生效,解决办法为同时使用Tailwind的important(在原class前加!),例如class="hidden md:!block"可以让元素在移动端下隐藏并在768px以上时显示成block元素
collapse 已知会与MediaWiki的collapse冲突,导致Mediwiki的collapse的内容被隐藏,解决办法为自行添加以下样式来禁用Tailwind的样式:.collapse {visibility: visible !important;}

参考手册

Tailwind的内容十分庞大,本页面无法涵盖到全部内容,只会列出常用且有用的class,如果想了解更多的内容,可以直接访问官方文档(英文)

优先级

CSS样式类是有优先级的,优先级高的样式类会覆盖掉低优先级的样式。优先级的规则十分复杂,但基本的规则是,描述的越具体的选择符(css selector)优先级越高。本帮助不会涉及CSS本身的知识,这里只举一个简单的例子:在.toolbox .title里定义的样式会覆盖掉在.toolbox里定义的同名样式。

灰机基础皮肤很多的样式类都描述的很具体,这些样式通常会比你直接写在class属性里的类优先级要高,通常这不会有问题。但在一些特殊的情况下,你必须要覆盖灰机应用的样式,则可以在Tailwind的样式类名前加一个!前缀,这将给对应的css样式设置!important标记,带这个标记的样式优先级会高于任何不带这个标记的。比如使用!text-lg则代表你需要覆盖任何其他和字体大小相关的样式,而使用你的大小定义。

响应式设计

辅助响应式设计是Tailwind最大的价值所在。

响应式布局用于适配各种不同大小(宽度)的屏幕下,页面的显示效果。如果你想让页面在手机、平台以及PC桌面上都能完整呈现的话,则需要掌握响应式设计的知识。如果你计划站点只支持在电脑上呈现,或者只能在手机上呈现,则可以跳过这部分。

在CSS中,设计响应式界面是一个十分复杂的过程,不过在Tailwind的帮助下,我们可以很轻松地达到以往要调试很久的效果。

Tailwind遵循手机优先的响应式定义,也就是你的默认样式应该为手机屏幕设计,然后再一层层补充更宽屏幕下的效果。

在响应式设计中,为了规范和实现标准,我们会给指定的宽度取一个名字(前缀),这个名字又称为“断点”。灰机覆盖了Tailwind默认的断点宽度,下表是灰机定义的前缀及其对应的屏幕宽度:

类名前缀 sm: md: lg: xl: 2xl: 3xl:
屏幕宽度 576px 768px 992px 1200px 1366px 1600px

这个表格的意思是说,当浏览网页的设备屏幕宽度大于等于指定的宽度时,应用带有指定前缀指定的样式类效果。

比如,以下的HTML:

<div class="bg-yellow-200 w-full lg:w-1/2">这个黄色的方块默认占据整行,但是如果你的设备宽度大于992像素则占据页面一半的宽度。</div>

会呈现为:

这个黄色的方块默认占据整行,但是如果你的设备宽度大于992像素则占据页面一半的宽度。

你可以通过调整浏览器窗口大小来看看具体的效果。

我们可以看到这里使用了3个class:bg-yellow-200w-full以及lg:w-1/2bg-yellow-200定义了这个div的背景色,w-full是说默认宽度占满其父容器的100%,而w-1/2代表占满父容器的二分之一,也就是50%。前缀lg:代表只有在屏幕宽度大于992像素时,这一条才会生效。

上面各样式类名称的意义会在下面有进一步解释,此时只需要了解响应式前缀的使用方法。没有前缀的样式为默认样式,可以理解为页面在所支持的最小屏幕宽度上的样式。

颜色表

Tailwind自带一套颜色调色板,由两个部分组成:颜色和亮度,其中颜色是一个英文单词,亮度是一个数字,范围从50-950,除了50和950之外,剩余的都是100的倍数,数字越小,颜色越亮,反之越暗,500为原始亮度。Tailwind所有定义颜色的类名都支持这个调色板,比如text-red-700代表给文字应用亮度值为700的red色,而bg-red-700使用了同一个颜色,但是作用于背景色

以下是具体的调色板:

50 100 200 300 400 500 600 700 800 900 950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

除此之外,还有没有亮度部分的黑白两色分别以blackwhite代表,比如class="text-white bg-black"会呈现为黑底白字的效果

你也可以使用不在默认颜色表里的自定义颜色,只需要使用一对[]即可。比如使用class="text-[#50d71e]"便可以 #50d71e 为文字设定颜色

大小长度

CSS中有非常多的单位定义,其中最有名的可能是px1px代表一个像素的长度,这样的单位被称为绝对单位。但由于现在设备类型众多,你并不知道你的页面会在什么样的终端设备上显示。在电脑屏幕和手机屏幕上,1个像素的宽度对于眼睛来说是不一样的,因为通常手机屏幕的单位面积里像素密度更高。面对多样的屏幕设备,使用相对单位会是一个更为合理的选择。在CSS里,最有名的相对单位应该是%,但是粒度不够细,我们有一个更细致的单位:rem1rem代表根节点定义的字体中大写字母M的宽度,2rem就是两倍宽度,不过很不幸目前这个根单位的长度定义依然还是px,在灰机站点的默认设置上,1rem = 16px

大部分情况下Tailwind使用rem来定义长度,但也保留1px这样的绝对长度。基本上,1个tailwind单位相当于0.25rem。以下是对照表:

后缀 rem px 视觉宽度 后缀 rem px 视觉宽度
0 0 0 14 3.5rem 56px
px - 1px
16 4rem 64px
0.5 0.125rem 2px
20 5rem 80px
1 0.25rem 4px
24 6rem 96px
1.5 0.375rem 6px
28 7rem 112px
2 0.5rem 8px
32 8rem 128px
2.5 0.625rem 10px
36 9rem 144px
3 0.75rem 12px
40 10rem 160px
3.5 0.875rem 14px
44 11rem 176px
4 1rem 16px
48 12rem 192px
5 1.25rem 20px
52 13rem 208px
6 1.5rem 24px
56 14rem 224px
7 1.75rem 28px
60 15rem 240px
8 2rem 32px
64 16rem 256px
9 2.25rem 36px
72 18rem 288px
10 2.5rem 40px
80 20rem 320px
11 2.75rem 44px
96 24rem 384px
12 3rem 48px