30分钟学习TailwindCSS

发布于2/24/2020 来自:「前端知否」微信公众号

这篇文章我会介绍TailwindCSS的一些基础概念和用法,以及用它可以做什么。我们还将尝试使用TailwindCSS制作一些组件,以在我们在其他框架(例如Bootstrap,Bulma等)上使用预先设计的组件时感受到不同。

在学习TailwindCSS之前,我们将讨论CSS的基础知识,以便我们了解CSS的概念和术语。如果您已经对CSS有很好的理解,则可以跳过CSS部分。

先学习CSS

在进一步了解TailwindCSS之前,我将邀请您返回学习CSS。目的是能够理解CSS本身的术语和概念。

通过重新研究CSS,我们将对基本CSS有了很好的了解。这样我们就可以轻松学习CSS框架。

CSS

CSS(级联样式表)是一种提供以标记(例如HTML)编写的样式文档的语言。 CSS还向浏览器指示HTML的显示方式。简而言之,CSS允许您设置字体类型,字体大小,背景色以及设置Web文档中包含的其他元素的样式。

例如,您具有如下的HTML代码,

<p> Hi, my name is Muhamad Nauval Azhar </p>

上面的代码可在HTML中创建段落。当然,您应该完整地编写它,从doctype到</ html>。

CSS控制段落的样式,第一个示例我们将文本颜色更改为红色。然后代码如下:

p { 
color: red;
}

上面的代码是CSS中的样式规则,用于设置在Web文档中使用tag <p>的HTML元素中文本的颜色。

请记住,上面的CSS代码不会只更改一个段落,而是将标记<p>上的整个文本颜色更改为红色。

只是文字的颜色?

CSS不仅可以调整文本的颜色,而且CSS可以做很多事情。您可以更改字体,背景颜色,设置背景图像,创建网格系统,创建菜单以及其他与Web界面相关的内容。

我们不会在这里完整讨论基本CSS

我们将不再完整讨论CSS的基础知识。因为,我假设您已经了解CSS中的概念和术语,例如选择器,CSS规则,CSS声明,属性,值,供应商前缀和其他内容。但是,作为开头和提醒,我将仅简要讨论刚才提到的CSS的基本概念。即使您不太了解CSS,您也

可以读完这篇文章,但是,这种风险通常会导致愚蠢的问题,邀请人们在公开讨论中欺负您。当然,您不想,对吗?

编写CSS

编写CSS代码并将其插入HTML中,有几种方法。基本上有3种方法可以提及,包括:内部样式,外部样式和内联样式。

1.内部风格

使用HTML中的tags <style>以这种方式插入CSS代码。假设我们有一个如下的HTML结构,

<!DOCTYPE html> 
<html>
<head>
<title> Learn CSS </title>
</head>
<body>
<p> 30分钟学习TailwindCSS </p>
</body>
</html>

然后,我们要在HTML中设置样式或将CSS代码插入HTML,然后编写要在标签<style>之间使用的CSS规则,并在关闭标签</ head>之前将其粘贴。

<!DOCTYPE html> 
<html>
<head>
<title> </title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p> 30分钟学习TailwindCSS </p>
</body>
</html>

2.外部风格

与以前的方法不同,我们将所有CSS规则记录在与HTML文件不同的文件中。创建一个扩展名为.css的新文件,在此我给出一个示例,其名称为style.css,文件内容如下,

p { 
color: red;
}

要将文件插入HTML,然后使用<link>标记,如下所示,

<!DOCTYPE html> 
<html>
<head>
<title> </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<p> 30分钟学习TailwindCSS </p>
</body>
</html>

属性href旨在识别我们在HTML中使用的CSS文件。尽管attributerel旨在指定两个文件之间的关系,但在此上下文中,HTML和CSS由于CSS是样式表,因此为属性指定样式表的值为value。

3.内联样式

此方法与内部样式之间存在相似之处,因为它们都不在其他文件中编写CSS规则。此方法非常简单,因为您无需在CSS代码中编写选择器。您将立即编写CSS声明,因为此方法会将CSS代码直接插入所需的tag中。举个例子,

<!DOCTYPE html> 
<html>
<head>
<title> </title>
</head>
<body>
<p style = "color: red;"> 30分钟学习TailwindCSS </p>
</body>
</html>

乍一看,此方法是如此简单且易于实现,但是,请花点时间想象一下,如果您有1000个标签<p>,并且要求它们具有相同的样式。当然,您只需要复制它,对吗?但是,当您需要更改CSS声明中的属性值时,该怎么办?那么,如果CSS声明具有10个以上的属性,怎么办?当然,这会打扰您。

除了这三种方法,您还可以使用JavaScript在HTML中插入CSS样式。简单来说,JavaScript有一个DOM(文档对象模型),DOM将HTML视为对象,并允许您通过JavaScript提供的API来处理样式,内容,属性等。

您也可以根据条件申请上述三种方式。要记住的事情是编写可重用,可以重用,可维护或可以维护的CSS规则,尽管在编写CSS代码时还需要应用其他一些方面,但是至少要结合这两点刚才您可以编写代码CSS是人类可读的。

CSS很简单

CSS是一种简单的语言,具有简单易懂的语法或书写风格。正如您之前所做的,更改文本的颜色仅需要3行代码,对吗?

让我们从此CSS语法开始进行基本的手术。 CSS很简单,

selector { 
// CSS 声明
}

首先不要惊慌,因为您听到了一个从未听过的术语,有时这个术语听起来很酷,即使它可能很容易理解。

让我们检查一下上面的CSS代码,将其分为几个要点,以使其更易于理解,

1. CSS规则

上面的代码是CSS规则。一段代码,将使HTML中的一个或多个元素生效。根据CSS声明,将赋予每个CSS规则不同的效果。 CSS声明写在左括号和右括号之间,如下所示:。{CSS declarartion}

2. CSS选择器

如前所述,CSS规则可以影响一个或多个元素,这取决于选择器。简而言之,选择器是CSS中允许我们选择要设置样式的元素的一种方式。在一个Web文档中,当然有多个HTML标记,因此,通过选择器,我们可以一次选择一个或多个HTML元素以赋予相同的样式。

选择器可以是HTML标记名称,类名称,ID,属性标记,伪选择器等。

选择器标签:您只需要写下标签的名称,即其课程,例如:p,div,表格,视频,跨度等等。

选择器ID:您需要在名称ID的开头添加井号(#),例如#header,#footer,#main等。

选择器类:您需要在类名称的开头添加一个点,例如:.name,.box,.widget,.menu等。

3. CSS声明

这是使用CSS进行“愉悦”的重点。因为,您可以在此处为之前选择的元素设置所需的样式。 CSS声明是一种设置CSS规则样式的方法。 CSS声明由属性,冒号,值和分号组成。之前,我们已经做了一行CSS声明,即:color:red;。该代码是单行CSS声明。为

什么叫CSS声明?因为在代码中有一个属性,即颜色“ acolon”,即:。一个值,即红色。最后是一个分号,即;。

属性是给出样式类型的指令。用小写或小写字母和符号“-”作为分隔符写的属性(如果名称peroperty由2个以上的音节组成)。每个属性名称都有其自己的作用。给定的效果还取决于给定的值,给定的值也必须与属性名称有关。在前面的示例中,我们使用pr

opertycolor更改了文本的颜色,使其变为红色,因为我们将valuesred分配给了property。因此,属性的值和名称必须相关。

给属性赋值,即在冒号或冒号之后:。一行CSS声明以分号或分号;结尾。最后一个位置的CSS声明不需要用分号关闭,但是使用时更好。

当然,我们可以在一个CSS规则上编写多个CSS声明。我们需要多少CSS声明取决于我们要为元素创建哪种样式。例如,我们要更改类别为name的元素的文本颜色,背景和字体。因此,代码如下

name { 
font-family: 'arial';
color: red;
background-color: blue;
}

上面的代码是CSS规则,它将文本的颜色更改为红色,背景更改为蓝色,并将字体更改为arial。

我们已经在本节中了解了CSS。在下一节中,我们将讨论TailwindCSS,并且假定您已经了解CSS的基本知识和术语。如果您听不懂,可以重复阅读直到您理解为止。

TailwindCSS

xxx

如果您遇到的通用框架由许多组件预先设计组成,则在此TailwindCSS中,您将找不到诸如按钮,卡片,警报,轮播等其他预先设计的组件。因为TailwindCSS不是UI工具包,而是实用程序优先的框架,用于快速构建自定义界面。

简而言之,在TailwindCSS中,有许多小类代表CSS声明。因此,当您要创建组件时,则需要使用其中的一些小类来创建您要引用的组件。

例如,您要制作一个按钮组件。在Bootstrap框架或其他具有预先设计的组件的框架中,您或多或少会这样做:

<button class="btn"> Button </button> 

or

<button class="button"> Button </button>

同时,在TailwindCSS中,您需要这样做:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" > 
Button
</button>

上面的类表示它们自己的属性和值。

  • bg-blue-500代表propertybackground-color:#4299e1;
  • text-white代表属性颜色:#fff;
  • font-bold代表属性font-weight:700;
  • py-2,即padding-y或padding-vertical表示属性padding-top:0.5rem;底部填充:0.5rem;
  • px-4表示padding-x或padding-horizo​​ntal表示属性padding-left:1rem; andpadding-right:1rem;
  • 四舍五入代表边界半径:.25rem;

看起来很复杂吧?

但是,像这样,即使您使用相同的框架,您与其他人创建的UI也会有所不同。与使用UI套件的情况不同,创建的UI趋于相同,因为在UI套件中可以使用预先设计的组件,尽管可以覆盖样式,但是结果可能不会有太大差别。

无法将TailwindCSS与UI工具包框架(例如Bootstrap,Bulma或Spectre)相提并论,因为它们基本上具有不同的概念。

如果在UI工具包框架中需要创建一些自定义类来自定义所使用的预先设计的组件,而在TailwindCSS中则可以减少自定义类的使用。因为,要制造组件,您需要通过编译实用程序类从头开始。

TailwindCSS不是唯一的实用程序优先框架

TailwindCSS于2017年11月2日首次发布。在此之前,有许多框架具有类似TailwindCSS的概念,包括:

上述框架大约落后4-5年。因此,在TailwindCSS之前,实用程序优先框架的概念已经被应用。换句话说,TailwindCSS并不是唯一的实用程序优先框架。

除了上述框架之外,Bootstrap还具有仅在版本4中添加的实用程序类。以前,它们也已添加,但是当版本3被命名为帮助程序类时。

尽管时间不长,但TailwindCSS一直吸引着人们的注意,因为在不到2年的时间里,它已在GitHub上获得了10,000多个星级。尽管TailwindCSS本身最近已踩到1.0.0-beta.4版本。

但是,我们不能断定TailwindCSS比其他效用优先框架要好,因为要得出结论,我们需要测试其中一些框架。不一定也适用于所有情况的框架。

因此,如果您正在寻找一个由一组预先设计的组件组成的框架,也许TailwindCSS不适合您。但是,如果您想构建一个具有标识的接口,则TailwindCSS可能适合您。

您不会驾驶跑车越野

可定做

尾风也非常可定制。您可以更改默认颜色,添加断点屏幕尺寸,添加系列字体以及添加其他实用程序类。为什么可以如此自定义? Tailwind有一个旨在保存所有配置的配置文件,在此配置中,您还可以指定要使用的实用程序类。另外,更酷的是,您可以设

置前缀,以便通过提供前缀可以最大程度地减少类名冲突。

示例文件tailwind.config.js

module.exports = { 
important: true,
theme: {
fontFamily: {
display: ['Gilroy', 'sans-serif'],
body: ['Graphical', 'sans-serif'],
},
extend: {
colors: {
cyan: '# 9cdbff',
},
margin: {
'96': '24rem',
'128': '32rem',
},
}
},
variants: {
opacity: ['responsive', 'hover']
}
}

上面的配置文件是可选的-不需要。 TailwindCSS将在项目的根文件夹中查找配置文件。如果没有,它将使用默认的config。

TailwindCSS有多大

与其他流行的框架相比,Tailwind具有相当大的文件大小。

xxx

考虑到Tailwind由实用程序类的集合组成,这是合理的。当然,可能的解决方案是删除我们不使用的实用程序类。但是如何?要解决此问题,可以使用PurgeCSS。它是一个可以帮助您删除未使用的CSS的工具。酷吧?

这样,您的CSS文件大小可以只有13kb。与Firefox Send一样,他们使用TailwindCSS并仅以13.1kb(在di-Minify之后)和4.7kb(在di-gzip之后)的大小归档CSS。

开始使用TailwindCSS

从这里开始,我将TailwindCSS称为Tailwind。

从安装到开发,Tailwind都有不错的文档。

xxx

特别是添加了Algolia搜索引擎。这样在学习Tailwind时会更加自在。

xxx

要安装Tailwind,您可以通过NPM或Yarn,而且要确保已安装Node.js。

安装Tailwind

您可以通过运行以下命令从创建新文件夹开始:

mkdir mytailwind

cd mytailwind

那么您需要通过包管理器之一Yarn或NPM将Tailwind添加为依赖项。

# NPM 
npm install tailwindcss --save-dev

# Yarn
yarn add tailwindcss --dev

上面的命令会将Tailwind作为devdependencies添加到package.json中。

将Tailwind添加到CSS文件

Tailwind的指令旨在使您更轻松地将Tailwind代码与CSS代码一起添加。将以下代码添加到CSS代码的第一行:

@tailwind base; 

@tailwind components;

@tailwind utilities;

/ ** 你的 CSS 代码 ** /

该指令将不能被浏览器直接读取,因此该指令将由Tailwind CLI转换为CSS代码。

假设您的CSS文件名为style.css,然后使用Tailwind CLI使用以下命令来转换或处理CSS代码:

npx tailwind build styles.css -o output.css

使用上述方法,每次更改CSS文件时都需要运行命令。为避免这种情况,您可以采取其他方法将Tailwind处理为CSS。您可以使用PostCSS,Webpack,Gulp或Laravel Mix。

Tailwind❤CDN

事实证明,可以通过CDN安装Tailwind!像一般的大多数库或框架一样,它必须具有CDN,以便可以轻松安装。

但是,不幸的是,使用CDN时有些事情您无法做,包括:

  • 您无法自定义默认的Tailwind主题
  • 您不能使用指令tailwind
  • 您不能启用已禁用的功能
  • 您无法安装第三方插件

开始前

HTML对每个元素都有默认样式。例如div,此元素具有固有的CSS声明,即display: block;。

有关具有默认样式的元素的完整列表,请在此处查看。

每个浏览器都有其默认样式,包括:

  • IE浏览器
  • 火狐浏览器
  • Opera
  • Chrome / Webkit

您可以想象,当您建立一个网站并在其他浏览器中访问它时,您赋予先前样式的某些元素的外观会稍有不同,因为它与默认浏览器样式“混合”了。这样,您网站的外观就会不一致-尽管不会太多。

为了克服此问题,CSS框架或库通常具有基本样式,该样式旨在覆盖每个浏览器中的默认样式。这样,HTML中的元素在每个浏览器中将具有相同的默认样式。

Tailwind有其自己的基本样式,称为“preflight”或以前称为“ base”。 Tailwind使用Normalize.css第三方库来执行此操作。您可以在此处查看Tailwind为哪些元素提供了默认样式。

Tailwind上的颜色

Tailwind提供了许多调色板。甚至每个级别的透明度都可以调整。每种颜色都有9种透明度。

例如蓝色:

xxx

这样,您就可以不受限制地使用颜色。因此,您将更加自由地制作组件。

尝试Tailwind

在知道如何设置Tailwind之后,该尝试使用Tailwind构建一些组件了。

Tailwind将其实用工具类分为11类。在这11个类别中,下面有几个实用工具类,我将不在下面讨论所有实用工具类,仅讨论一些需要解释的实用工具类。因为其他实用工具类通常具有与CSS相同的功能。

11个类别包括:

A. 布局

在此类别中,当然有几个与布局相关的属性,包括:container, display, float, object-fit, object position, overflow, position, visibility 和 z-index.

A.1 容器

与Bootstrap相似,Tailwind也具有容器,它们的功能相同,即将元素包装在内部并在当前断点处设置min-width和max-width。不同之处在于,Tailwind中的容器不会自动位于中间;要使其处于中间位置,它必须调节margin-leftmargin-right成为auto。在Tailwind中,可以通过提供实用工具类mx-auto来解决,该工具表示margin-x或margin-x水平,更精确地提供CSS声明。margin-left: auto; margin-right: auto;

A2 显示

作为CSS,Tailwind还允许您调整显示属性,例如block,inline,inline-block,flex和其他。要使用flexbox,Tailwind有更多关于flexbox的特定文档。

A.3 上/右/下/左

我在上面没有提到这一部分,因为写下来相当复杂。该实用工具类与位置一起使用-无论是绝对位置,相对位置还是固定位置。用于设置属性left,right,top和bottom的实用工具类。以下是一些类名称,包括:

xxx

A.4 Z-index

当然,您已经了解了该实用工具类的功能。基本上像CSS一样,该实用工具类用于管理堆栈顺序-例如PhotoShop设计软件中的图层面板或其他。使用该类会减少自定义类的使用。

xxx

排版

此类别中的所有类都可以设置排版,例如font-size, font-family, color,font-weight, word-break, letter-spacing等等。

B.1 颜色

如前所述,Tailwind提供了一个调色板,每种颜色都有一定的透明度。就像设置背景颜色一样,要设置文本颜色,Tailwind也具有类似的类名。

xxx

B.2 字体家族

对于字体,默认的Tailwind有3个选择,即font-sans,font-serif和font-mono。如前所述,Tailwind是非常可定制的,因此您可以添加另一个类名称来设置字体。

xxx

B.3 字体大小

您不能任意调整字体大小。但是,Tailwind通过提供几个类名来进行设置,例如:

xxx

C. 背景

Tailwind还提供了一个实用工具类来设置背景。但是,在所有可用于设置背景的实用工具类中,您仍然需要创建一个自定义类或嵌入式样式来设置背景图像。因为要设置背景图像,所以需要指定要使用的图像。

背景类别中可用的一些实用工具类是背景附件,背景颜色,背景位置,背景重复和背景大小。与背景相关的所有实用工具类均以名称bg- *开头,例如:bg-cover将背景大小设置为Cover

D. 边框

在此类别中,有4种不同的实用工具类,包括:边框颜色,边框样式,边框宽度和边框半径。

D.1 边框颜色

调整边框的颜色,类似于“Tailwind”中的其他颜色。区别在于,设置边框颜色的前缀是名称border- *,例如:border-blue-600,将边框颜色设置为蓝色,级别为600。

D.2 边框半径

与背景不同,并非与边框相关的所有类名都以border- *开头。要设置Tailwind的边界半径,我们需要使用以rounded的单词开头的类名称,其中一些是:

xxx

E. Flexbox

正如我之前提到的,Tailwind有自己的类别来讨论flexbox。该类别包括几个实用工具类,包括:flex direction, flex wrapping, align items, align content, align self, justify content, flex, flex grow 和 flex shrink.

F. 间距

在此类别中,基本上仅由 paddingmargin 组成。但是,要在页边空白处设置负值,Tailwind通常用 - 分隔类的名称。因此,此类别包括填充,边距和负边距。要设置padding,请在类的名称前添加p,然后再添加side和size,因此格式如下:p {side?}-{size}。就像padding一样,使用相同的方法来调整边距。

区别是,边距以m开头。与边距类似,要以相同的方式设置负边距,负边距的差异以-m开头,例如:-m-5以提供CSS声明边距:-1.25rem; 。

G. 尺寸

此类中的所有实用工具类基本上仅用于设置高度和宽度。但是,众所周知,CSS具有min 和 max属性。因此,此类别包括宽度,最小宽度,最大宽度,高度,最小高度和最大高度。要调整宽度,您需要使用此类的格式:w- {number}。

例如:w-10提供CSS声明宽度:2.5rem; 。设置高度,请使用相同的格式,需要把w更改为h。如果要设置min和max,需要添加min-或max-

H. 表格

该类别仅包括2个实用工具类,即border collapse 和 table layout。

I. 效果

与表格一样,此类别有2个实用工具类,即阴影和不透明度。 Tailwind至少有8个用于管理阴影的类,包括:

xxx

其中一些还将具有以下外观:

xxx

至于不透明度,Tailwind提供了至少5种实用工具类,其中包括:

xxx

并显示以下内容,

xxx

J. 互动性

此类别包括与交互性相关的实用工具类,包括appearance, cursor, outline, pointer events, resize 和 user select。使用其中一些实用工具类,您可以设置光标类型,设置元素对指针事件的响应,设置用户是否可以在元素内选择文本以及管理其他交互性。

K. SVG

最后一个类别是SVG。该类别仅包括填充Fill笔触Stroke。他们每个只有一个class。Fill填充只有fill-current,将SVG颜色字段设置为“当前”文本颜色。例如:

xxx

上面的SVG填充颜色遵循text-teal-500的颜色。而Stroke笔触,只有stroke-current。与fill-current功能相同,区别在于调整笔触颜色。例:

xxx

当然,我们不会一一尝试,我们将学习使用Tailwind的概念。因此,我们将尝试为该练习制作一些组件,来帮助了解如何构建自己的组件。

制作按钮组件

从一个按钮开始。我们将制作3种类型的按钮,包括:primary, secondary 和 tertiary。

首先,我们将创建主按钮。

<button class="bg-blue-600 text-white px-4 py-2 rounded"> 
Button
</button>

那么结果如下:

xxx

然后,我们将创建一个辅助按钮。此按钮与主要按钮相反,它具有透明的背景并带有边框。像这样,

<button class="text-blue-600 border border-blue-600 px-4 py-2 rounded"> 
Button
</button>

结果如下:

xxx

在上面的代码中,您找到了一个新类,即border 和 border-blue-600。这两个类都与border CSS有关。

  • border 代表边框宽度:1px;
  • border-blue-600 表示边框颜色:#3182ce;

接下来,我们将创建一个第三类按钮。与次要按钮很像,只有边框被删除了。

xxx

到目前为止,我们已经制作了3种类型的按钮,即主要,次要和第三种。

要以相同方式制作新组件,只需要将相关的实用工具类合并到元素中,即可创建您创建的组件。

状态变化

一切完成后,问题就出现了。处于某个状态时如何设置属性?例如,当悬停时。因此,我们想在悬停按钮时更改背景颜色。

为了克服这个问题,Tailwind提供了一个解决方案。 Tailwind具有“ State Variants”,因此您可以将实用工具类设置为某个状态,例如在悬停,聚焦等期间。

在Tailwind中使用状态变化非常简单。我们只需要添加所需状态的前缀名称,然后添加实用工具类即可。例如:悬停:{utility-class}。

例如,我们要在结束时将背景色更改为有点暗。然后代码是这样的,

hover: bg-blue-800

或者我们想要更改文本的颜色,像这样,

hover: text-white

或者我们想要将两个或两个以上结合起来,像这样,

hover: bg-blue-800 hover: text-white hover: ...

回到我们的代码;接下来,我们将在创建的主按钮上悬停状态。当切换颜色变深时,我们将更改主要按键上的背景颜色。换句话说,我们将为主键状态悬停提供实用工具类 bg-blue-700。

<button class="bg-blue-600 text-white px-4 py-2 rounded hover: bg-blue-700"> 
Button
</button>

悬停时,二级和三级按钮将具有蓝色背景色。您应该能脑补出来效果。

制作卡组件

在按钮之后,卡片是经常使用的组件。不管是设计仪表板还是登陆页面。

假设我们将为博客文章制作卡片组件。因此,在卡片的组件中,有许多衍生自卡片的元素,例如图像卡片,卡片主体,卡片标题等。

在此之前,我将首先使用Figma制作线框。

xxx

类似于我们将要制作的卡片组件。

让我们动手吧!

首先,我们将首先编写标记结构。基于上面的线框,我们需要几个元素,包括:

  • div 包装整个组件
  • img 显示图像
  • div 包裹卡片
  • h4 卡片标题
  • p 卡片说明
  • 用作号召性用语的按钮

HTML结构如下,

<div> 
<img src = "...">
<div>
<h4> ... </h4>
<p> ... </p>
<div>
<button> ... </button>
</div>
</div>
</div>

在提供实用工具类之前,让我们搜索要应用于上述img元素的图像。您可以在Unsplash,Pexels,Pixel等上搜索免费图像。

这是我将要使用的图片,

xxx

现在是时候将实用工具类分配给我们之前创建的标记了。

我们将需要的图像应用于img,而且我们将给出白色背景色并给出阴影。因此,我们需要的实用工具类是bg-white,shadow-lg 和 w-64来设置卡组件的宽度。

HTML结构如下,

<div class="bg-white shadow-lg w-64"> 
<img src="https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&autc==754&q=80" alt="koala">
</div>

我们使用的实用工具类如下:

  • bg-white 提供白色背景并表示CSS声明背景颜色:#fff;
  • shadow-lg 为元素提供阴影效果并表示CSS声明box-shadow: 0 10px 15px -3px rgba(0, 0, 0,.1), 0 4px 6px -2px rgba(0, 0, 0,.05);

到目前为止,我们的外观如下:

xxx

我们还将实用工具类添加到用作卡体的元素中。

HTML结构如下,

<div class="p-6"> 
<h4 class="font-bold"> Hello, my name is Koala! </h4>
<p class="text-sm mt-2"> I am a person who lives in the house and I work as a programmer. </p>
</div>

在上面的HTML结构中,我们找到了几个刚刚使用的实用工具类,包括:

  • p-6 表示尺寸为6的填充,表示CSS声明填充:1.5rem;
  • font-bold 表示具有粗体值的font-weight并表示CSS声明font-weight: 700;
  • text-sm 表示文本尺寸小(小),代表CSS声明字体大小:.875rem;
  • mt-2 的意思是margin-top,距离为4,代表CSS声明margin-top: 0.5rem;

到目前为止,我们已经具有以下外观:

xxx

接下来,我们需要在该段落下的卡片上添加一个号召性用语按钮。

尝试制作按钮组件时,我们可以复制先前制作的HTML代码。

HTML结构如下,

<div class="text-right mt-4"> 
<button class="bg-blue-600 text-sm text-white py-1 px-3 rounded">
Read More
</button>
</div>

如果您当前使用的是Bootstrap 4,则可能对我们之前使用过的一些实用工具类有所了解,例如text-right,mt-*,p-*,rounded等。该实用工具类具有与Bootstrap 4上的工具类相同的优点。

至此,我们已经有一个卡组件。

xxx

现在,我们将复制1个组件块代码以制作3个组件卡。然后,我们将用div和工具类div 包装这三个卡片组件。卡片组件还可以变成网格,使用工具类flex div。

xxx

响应式设计

到目前为止,我们已经尝试制作两个组件,即卡片和按钮。而且我们还熟悉几种实用工具类以及Tailwind的功能之一,即状态变体。除状态变量外,Tailwind还提供了响应式设计功能。您可以为每个断点设置实用工具类。至少Tailwind提供4个断点,即sm,md,lg 和 xl

  • sm 适用于最小宽度为640px的设备
  • md 适用于最小宽度为768px的设备
  • lg 适用于最小宽度为1024px的设备
  • xl 适用于最小宽度为1280px的设备

要将其与实用工具类结合使用,那么我们需要将其添加到实用工具类之前,将其格式化为:sm:{utility-class},md:{utility-class},lg:{utility-class}, xl:{utility-class}。

我们之前使用的实用程序类适用于所有断点,或者换句话说,适用于所有设备-包括移动设备。

以上所有断点都是Tailwind的默认值,您可以添加或删除现有断点。同样,这些断点将转换为CSS媒体查询代码。

xxx

同时,如果我们希望将实用工具类设置为仅在几种设备尺寸上应用,那么我们需要指定目标设备的尺寸。假设我们要在除平板电脑设备上的所有设备上使文本变为蓝色。

<p class="text-blue-900"> Hello, bro! </p>

上面的代码将使文本变为蓝色,而如果我们想在设备的宽度至少为640px时更改文本,则在所需的实用工具类名称之前添加前缀sm:。

<p class="text-blue-900 sm: text-red-900"> Hello, bro! </p>

使用上面的代码,我们将在所有设备上显示蓝色文字,而在宽度最小为640px的设备上,该文字将变为红色。

您还可以同时为多个设备指定实用工具类。

<p class="text-blue-900 sm: text-red-900 md: text-green-900 lg: text-yellow-900 xl: text-black"> 
Hello, bro!
</p>

如果仅适用于手机怎么办?

如前所述,如果您没有在使用的实用工具类上指定断点,则该实用工具类适用于所有设备-包括宽度小于640px的移动设备。

提取组件

Tailwind是实用程序优先的框架,因此创建的组件将包含实用工具类的集合。这意味着当您要创建相同的组件时,您还将编写相同的实用工具类集。这样,当您想为该组件更改一个实用工具类时,就需要更改所有具有相同“意图”的组件。

例如,您有一个按钮组件,其结构如下所示,

<button class="bg-blue-600 text-white px-4 py-2 rounded"> 
Button
</button>

在其他地方,您需要一个button组件,因此您需要将结构复制到20个位置;当您想将按钮的填充大小(例如更改为px-1 py-2)时,也需要在20个不同的位置进行更改。这将花费大量时间,并且肯定很累。

为了克服这个问题,Tailwind提供了一种解决方案,即“提取组件”。 Tailwind提供了伪指令@apply它允许您一次组合多个实用工具类

例如,在创建按钮组件时,不是创建这样的结构,

<button class="bg-blue-600 text-white px-4 py-2 rounded"> 
Button
</button>

更好的是这样的:

<button class="button"> 
Button
</button>

这也太像Bootstrap了!

冷静!即使这样,您仍然可以像以前一样使用指令@apply控制实用工具类。因此,您将可以在Tailwind中的实用工具类中自由发挥创造力。

<button class="button"> 
Button
</button>

<style>
.button {
@apply bg-blue-600 text-white px-4 py-2 rounded;
}
</style>

太酷了!

请记住,要使用指令@apply和Tailwind中提供的其他指令功能,您需要使用PostCSS或其他Task Runner。当然,您不能使用CDN做到这一点。因为,该代码将转换为浏览器可以理解的CSS代码。

通过使用此方法,还可以为每个组件制作修饰符

<button class="button"> 
Button
</button>

<button class="button button-red">
Button
</button>

<style>
.button {
@apply bg-blue-600 text-white px-4 py-2 rounded;
}
.button.button-red {
@apply bg-red-900;
}
</style>

要将其与状态结合起来,通常需要像CSS那样进行。

<button class="button"> 
Button
</button>

<style>
.button {
@apply bg-blue-600 text-white px-4 py-2 rounded;
}

.button:hover {
@apply bg-blue-700;
}
</style>

指令: @screen, @variants & @responsive

除了@apply和@tailwind外,Tailwind还具有可以更轻松地帮助我们工作的指令,包括@screen,@variants 和 @responsive。

@screen指令允许您创建媒体查询,该媒体查询引用我们在响应式设计部分中先前讨论的断点名称之一。

如果您要进行以下媒体查询,

@media (min-width: 640px) { 
/ * ... * /
}

然后您可以使用指令 @screen进行更改:

@screen sm { 
/ * ... * /
}

@variants指令使您可以针对自己创建的实用工具类,针对版本生成鼠标悬停,焦点悬停,活动悬停和组悬停。假设您自己这样制作其他实用工具类,

@variants focus, hover { 
.rotate-0 {
transform: rotate(0deg);
}
.rotate-90 {
transform: rotate(90deg);
}
}

上面的代码将生成您创建的实用工具类的悬浮和集中版本。编译后,您的代码将具有以下输出:

.rotate-0 { 
transform: rotate(0deg);
}
.rotate-90 {
transform: rotate(90deg);
}.

focus\:rotate-0:focus {
transform: rotate (0deg);
}.
focus\:rotate-90:focus {
transform: rotate(90deg);
}.

hover\:rotate-0:hover {
transform: rotate(0deg);
}.
hover\:rotate-90:hover {
transform: rotate(90deg);
}

使用示例:

<div class="rotate-0 hover:rotate-90"></div>

@responsive指令允许您生成所创建的实用工具类的响应版本,其工作方式类似于指令 @variants。

@responsive { 
.bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
}

上面的代码将产生以下输出:

.bg-gradient-brand { 
background-image: linear-gradient(blue, green);
}

/ * ... * /

@media (min-width: 640px) {
.sm\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/ * ... * /
}

@media (min-width: 768px) {
.md\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/ * ... * /
}

@media (min-width: 1024px) {
.lg\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/ * ... * /
}

@media (min-width: 1280px) {
.xl\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/ * ... * /
}

当然,以上结果取决于先前在Tailwind配置文件中定义的断点。

需要重申的是,Tailwind中可用的所有指令功能都需要转换为浏览器可以理解的标准CSS代码。因此,我们需要任务运行器或使用Tailwind CLI来执行此操作。

与预处理器一起使用

由于Tailwind是PostCSS插件,因此没有什么可以阻止您将其与Sass,Less,Stylus或其他预处理器一起使用的,就像您与其他PostCSS插件(如Autoprefixer)一样。

重要的是要注意,您不需要在Tailwind中使用预处理器-无论如何,您通常在Tailwind项目上编写很少的CSS,因此使用预处理器并不像在编写大量代码的项目中那样有益自定义CSS。

使用PostCSS作为预处理器

如果您将Tailwind用于一个全新的项目,并且不需要将其与任何现有的Sass / Less / Stylus样式表集成,则应高度考虑依赖其他PostCSS插件来添加您使用的预处理器功能,而不是单独使用预处理器。

这有一些好处:

您的构建将更快。由于不必通过多种工具来解析和处理CSS,因此仅使用PostCSS即可更快地编译CSS。

因为Tailwind向CSS添加了一些新的非标准关键字(例如@tailwind,@apply,theme()等),所以常常不得不以烦人,不直观的方式编写CSS,以获取预处理器以提供期望的输出。使用PostCSS可以避免这种情况。

用于使用PostCSS进行处理的规范插件是postcss-import

要使用它,请通过npm安装插件:

#npm
npm install postcss-import

#yarn
yarn add postcss-import

然后将其添加为PostCSS配置中的第一个插件:

postcss.config.js

module.exports = {
  plugins:[
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

1. 关于postcss-import需要注意的重要一件事是,它严格遵守CSS规范,并且不允许在文件的最顶部(除了文件的最顶部)使用@import语句。例如:

下边用法无效,必须先使用@import语句

/* components.css */

.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

/* 无效 */
@import "./components/card";

解决此问题的最简单方法是,不要将常规CSS和导入文件混在同一文件中。而是为您的导入创建一个主入口文件,专门用来导入组件CSS文件,并将所有实际CSS放在单独的组件文件中。如下:

使用单独的文件导入和实际CSS

/* components.css */

@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

/* components/card.css */
.card {
  @apply p-4 bg-white shadow rounded;
}

2. 在主CSS文件中包含@tailwind声明。

下边的写法无效,必须先使用@import语句

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

您可以通过将@tailwind声明放在各自的文件中来解决此问题。为了简化此操作,我们为每个@tailwind声明提供了单独的文件,其中包含框架本身,您可以直接从node_modules导入。

导入我们提供的CSS文件

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

postcss-import很聪明,可以自动在node_modules文件夹中查找文件,因此您无需提供完整路径-例如,"tailwindcss/base"就足够了。

与Sass / Less / Stylus一起使用Tailwind

如果Tailwind可以与Sass,Less,Stylus或其他类似的CSS预处理器一起使用,这似乎更酷。这样我们就可以使用诸如嵌套,mixin,变量,函数等功能。

更多具体的用法和说明,请参考文档https://tailwindcss.com/docs/using-with-preprocessors/#app

恭喜您刚刚学习了TailwindCSS!

学习新事物有时会令人恐惧,因为我们过多地听取了其他人对较早事物的假设。为了克服这样的问题,我们只需要自己尝试一下,这样我们就会对自己的期望做出评估。

这次我们学到了一些新东西,而框架仍然是新的。尽管此Tailwind仍存在一些缺点,例如没有用于过渡,伪选择器,转换等的实用程序类。

希望与此有关,您可以将Tailwind用于下一个要使用的项目。