关于css:一次就能看懂的Tailwind-CSS介绍

55次阅读

共计 11160 个字符，预计需要花费 28 分钟才能阅读完成。

本文面向从未应用过 Taliwind CSS 的初学者。将通过搭建 Tailwind CSS 的环境来解说根本设置和自定义办法，以此来理解 Taliwind CSS 这一个日益风行的 CSS 框架。

以后 Taliwind CSS 的应用状况是，用户数量在减少，新性能也在陆续增加。以后最新版本为 v3.0。本文档中形容的一些内容在 v3.0 中也能够通过更简略的形式进行设置。然而，Utilize Class 的基础知识没有扭转，因而提供了学习基础知识的信息。

目录

  • 1 什么是 Tailwind CSS？
    — 1.1 什么是 Utilize Class？
    — 1.2 为什么抉择 Tailwind CSS？
  • 2 营造环境
    — 2.1 应用 cdn 的办法
    — 2.2 应用 npm 装置 Tailwind css
  • 3 如何应用 Tailwind CSS
    — 3.1 显示 Hello Tailwind CSS
    — 3.2 字符大小设置
    — 3.3 字符粗细设置
    — 3.4 字符色彩设置
    — 3.5 创立按钮
    — 3.6 Tailwind CSS 定制
    — 3.7 伪类设置悬停
    — 3.8 伪类设置重点
    — 3.9 过渡设置
    — 3.10 变换设置
    — 3.11 分组设置
    — 3.12 动画设置
  • 4 tailwind.confing.js 配置文件
    — 4.1 创立配置文件
    — 4.2 增加色彩
    — 4.3 减少最大宽度和间距
    — 4.4 增加字体大小
    — 4.5 如何自定义其余值
  • 5 Tailwind CSS 插件设置

1、什么是 Tailwind CSS？

Tailwind CSS 是一个利用专用程序类（Utilize Class，下文皆称 Utilize Class）的 CSS 框架。许多人会想到 CSS 框架，有很多，例如 Bootstrap、Bulma 和 Material UI。Bootstrap 和 Bulma 等框架利用事后筹备好的组件（例如按钮、菜单和面包屑）进行设计。在 Tailwind CSS 中，没有筹备任何组件，而是应用 Utilize Class 来创立和设计本人的组件。

Tailwind CSS 还提供了一个 Headless UI (https://headlessui.dev)，如果你想创立简单的组件（例如下拉菜单和对话框），你能够应用它。

原来 Bootstrap 等框架能够通过提前准备组件汇合来高效地设计网站，然而有一个毛病，就是因为应用了雷同的设计，所以没有原创性。相比之下，Tailwind CSS 没有组件汇合，所以即便你创立一个名为雷同按钮的组件，每个人都会利用不同的 Utilize Class 创立它，能够创立出一个高度原创的网站。

两者都有长处和毛病，所以应用哪一个取决于集体，但应用 Tailwind CSS 的人数正在稳步减少。

1.1、什么是 Utilize Class？

例如，如果要应用 Bootstrap 创立按钮，请将 class 设置为 btn。然而，在 Tailwind 中，并没有 btn 等用于创立按钮的 class，你能够通过编写如下所示的Utilize Class 来创立按钮。你可能会感觉要设置的类太多了，然而学习老本很低，因为你一用就习惯了。如果不晓得类名，能够通过搜寻 Tailwind CSS 文档 轻松找到它。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded"> 前端晚间课 </button>

bg-indigo-700 设置色彩，font-semibold 设置字体粗细，text-white 设置文本色彩，py-2 设置左右填充，px 设置高低填充，rounded 设置圆角。

创立一个按钮
这里设置的 Utilize Class 在类自身中没有特定的含意（不像 Bootstrap 的 class btn代表的就是按钮），能够用在各种中央（有时用于按钮），有时用于导航链接等，所以它被命名为实用程序类（Utilize Class）。也就是说 Utilize Class 是 Tailwind CSS 中事后配置的类。

在解释 Tailwind 的 Utilize Class 时，社区中应用了低级别一词，例如低级别款式、低级别实用程序类和低级别框架。

有 9 种不同的字体大小和相当多的色彩的Utilize Class，因而你能够通过仅更新 html 文件进行设计，而无需编写本人的 css 款式。

如果你想应用未在 Tailwind CSS 的 Utilize Class 中注册的色彩，你可能想晓得该怎么做。在这种状况下，你能够通过在 Tailwind CSS 配置文件中注册它，以与其余 Tailwind CSS Utilize Class雷同的形式应用它。

在以后版本中，即便未在 Utilize Class 中注册，也能够应用括号设置 text-[#121212] 和w-[100px]等固定值，而无需在配置文件中对其进行形容。对于常常应用的那些，持续在配置文件中进行设置会更有效率。

1.2 为什么抉择 Tailwind CSS？

读到这里之后，你可能想晓得是否应该在不应用 Tailwind CSS 的状况下应用 style 属性进行编写？与 style 属性相比，应用 Tailwind CSS 是有一些劣势的。

应用 Tailwind CSS，你能够应用 Utilize Class 轻松设置响应式设计，因而您无需设置媒体查问。一旦习惯了 Tailwind CSS，你就会遗记应用媒体查问。此外，作为伪类的悬停和焦点等设置无奈通过 style 属性进行设置，但在 Tailwind CSS 中，能够通过利用类设置伪类。你还能够应用 Utilize Class 通过 CSS 设置动画和突变色彩。

搭建环境

应用 cdn 的办法

应用 cdn 时，请将以下链接标签粘贴到 html 中。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

请留神，如果你应用 cdn，你将无奈自定义 Tailwind CSS，这将在本文档前面介绍，例如增加色彩。

应用 npm/yarn 装置 Tailwind css

你无奈应用 cdn 自定义 Tailwind CSS。如果要自定义，须要用 npm、yarn 来装置 Tailwind CSS。

 $ npm init -y
 
 $ npm install tailwindcss@latest

接下来，创立一个 css 目录并在其中创立一个 style.css 文件。将以下三个 tailwind 指令 增加到 style.css 文件中。这个 style.css 不能间接从 html 中读取。因而，咱们稍后会构建它，并将其转换为相熟的 html 能够读取的 css 文件。通过构建，Tailwindcss 应用的 Utilize Class 将从根底、组件和实用程序中提取。

@tailwind base;
@tailwind components;
@tailwind utilities;

创立一个 public/css 目录来寄存构建后创立的 css 文件。

让咱们理论构建并创立一个 css 文件，以从增加了 Tailwind 指令的 style.css 文件中读取 html。

$  % npx tailwind build ./css/style.css -o ./public/css/style.css
  
   tailwindcss 2.1.2
  
   🚀 Building: css/style.css
  
   ✅ Finished in 2.61 s
   📦 Size: 3.81MB
   💾 Saved to public/css/style.css

你能够看到创立的 css 文件蕴含一般的 CSS。因为 Twailwind 事后创立的所有 Utilize Class 都有形容，因而文件很大，行数为 50,000 或更多。

/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {box-sizing: border-box;}

你还能够看到在创立的 style.css 文件的顶部利用了古代规范化。

应用 npx 命令构建，能够将 build 命令增加到 package.json 文件中


"scripts": {"build": "tailwind build css/style.css -o public/css/style.css"},

这样就实现了能够应用 Tailwind CSS 的环境搭建。

如何应用 Tailwind CSS

Hello Tailwind CSS

当初你曾经构建了一个应用 Tailwind 的环境，请在 public 目录中创立以下 index.html 文件。应用 link 标签指定构建后的 style.css。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello Tailwind CSS</h1>
</body>
</html>

关上浏览器，显示如下：

应用 Utilize Class 来装璜文本。设置四个实用程序类：字体大小、色彩、地位和粗细。

<h1 class="text-4xl text-green-700 text-center font-semibold">Hello Tailwind</h1>

从这里开始，咱们来介绍常常应用的Utilize Class。

字符大小设置

要设置字体大小，请应用 text- {size}。大小能够取 13 个值。相应的 CSS 款式在括号中。

.text-xs（字体大小：.75rem；）.text-sm（字体大小：.875rem；）.text-base（字体大小：1rem;）.text-lg（字体大小：1.125rem；）.text-xl（字体大小：1.25rem；）.text-2xl（字体大小：1.5rem；）.text-3xl（字体大小：1.875rem；）.text-4xl（字体大小：2.25rem；）.text-5xl（字体大小：3rem；）.text-6xl（字体大小：4rem；）.text-7xl（字体大小：4.5rem；）.text-8xl（字体大小：6rem；）.text-9xl（字体大小：8rem；）

当理论利用于 html 时，它将如下所示:

<div class="text-center mt-10">
    <p class="text-xs"> 前端晚间课 </p>
    <p class="text-sm"> 前端晚间课 </p>
    <p class="text-base"> 前端晚间课 </p>
    <p class="text-lg"> 前端晚间课 </p>
    <p class="text-xl"> 前端晚间课 </p>
    <p class="text-2xl"> 前端晚间课 </p>
    <p class="text-3xl"> 前端晚间课 </p>
    <p class="text-4xl"> 前端晚间课 </p>
    <p class="text-5xl"> 前端晚间课 </p>
    <p class="text-6xl"> 前端晚间课 </p>
</div>

字符粗细设置

要设置字符粗细，请应用 font- {thickness}。厚度能够取 9 个值。相应的 CSS 款式在括号中。

.font-thin (font-weight: 100;)
.font-extralight (font-weight: 200;)
.font-light (font-weight: 300;)
.font-normal (font-weight: 400;)
.font-medium (font-weight: 500;)
.font-semibold (font-weight: 600;)
.font-bold（font-weight：700；）.font-extrabold（font-weight：800；）.font-black（font-weight：900；）
<div class="text-center mt-10">
    <p class="font-thin"> 前端晚间课 </p>
    <p class="font-extralight"> 前端晚间课 </p>
    <p class="font-light"> 前端晚间课 </p>
    <p class="font-normal"> 前端晚间课 </p>
    <p class="font-medium"> 前端晚间课 </p>
    <p class="font-semibold"> 前端晚间课 </p>
    <p class="font-bold"> 前端晚间课 </p>
    <p class="font-extrabold"> 前端晚间课 </p>
    <p class="font-black"> 前端晚间课 </p>
</div>

文字色彩设置

要设置文本色彩，请应用 text- {color}-{color depth}。色彩能够设置为红色、彩色、红色、蓝色、靛蓝色……等。色彩强度能够取 9 个值。例如，在绿色的状况下，如下所示。

text-green-100（色彩：# f0fff4;）text-green-200（色彩：#c6f6d5；）text-green-300（色彩：#9ae6b4；）text-green-400（色彩：#68d391；）text-green-500（色彩：#48bb78；）text-green-600（色彩：#38a169；）text-green-700（色彩：#2f855a；）text-green-800（色彩：#276749；）text-green-900（色彩：#22543d；）

如果要将文本色彩更改为红色而不是绿色，能够像 text-red-500 一样更改它。如果要更改背景色彩，能够应用 bg-red-500 进行设置。

<div class="text-center mt-10">
    <p class="text-green-100"> 前端晚间课 </p>
    <p class="text-green-200"> 前端晚间课 </p>
    <p class="text-green-300"> 前端晚间课 </p>
    <p class="text-green-400"> 前端晚间课 </p>
    <p class="text-green-500"> 前端晚间课 </p>
    <p class="text-green-600"> 前端晚间课 </p>
    <p class="text-green-700"> 前端晚间课 </p>
    <p class="text-green-800"> 前端晚间课 </p>
    <p class="text-green-900"> 前端晚间课 </p>
</div>

也能够应用诸如边距、填充和 flexbox 之类的实用程序类。您能够在 [官网文档]() 中查看每个Utilize Class。

创立按钮

当初你晓得 Utilize Class 的样子，让咱们应用 Utilize Class 来创立一个按钮。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded"> 前端晚间课 </button>

在 py-2 中，高低设置了 .5rem padding，在px-4 中，左右设置了1rem padding。在圆形中，边界半径 .25rem 被利用并且角被圆化。

Tailwind CSS 自定义

因为按钮是一个很有可能被重用的组件，并且你心愿在应用程序中对立设计，你能够注册 Utilize Class 集来创立按钮作为另一个类。

关上预构建的 css / style.css 文件并在 @components 和 @utility 指令之间增加以下内容。

@tailwind base;

@tailwind components;

.btn{@apply font-semibold text-white py-2 px-4 rounded;}

@tailwind utilities;

而后从新构建一下，npm run build,

会笼罩构建完后的 public/css/style.css，所以关上style.css 文件，搜寻btn

能够看到方才用 @apply 增加的内容曾经作为 css 增加到 style.css 文件中了,

.btn{
  font-weight: 600;
  color: #fff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
}

应用 btn 类 和增加的按钮创立，只将背景色彩更改为红色。

<div class="text-center mt-10">
    <button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded"> 前端晚间课 </button>
    <button class="bg-red-700 btn"> 前端晚间课 </button>
</div>

伪类设置悬停

理解如何通过悬停在 Tailwind 中执行伪类，以在光标悬停在按钮上时更改按钮的色彩。如果要更改色彩，请在悬停后设置色彩，设置将能够体现进去。

<button class="bg-red-700 btn hover:bg-red-500"> 前端晚间课 </button>

伪类设置焦点

单击按钮时还要设置焦点。为了清晰起见，从圆角变为圆形以强调按钮的圆度。批改@apply

@tailwind base;

@tailwind components;
.btn{@apply font-semibold text-white py-2 px-4 rounded-full;}
@tailwind utilities;

当抉择按钮（应用选项卡）时，将显示一个方框。单击时会呈现一个方框，因而咱们通过设置焦点以擦除方框。

当我将焦点设置为无轮廓时，外框隐没，但我不晓得按钮是否被选中。

<button class="bg-red-700 btn hover:bg-red-500 focus:outline-none"> 前端晚间课 </button>

设置暗影轮廓，以便您能够看到按钮被选中。如果你设置它，会沿着按钮创立一个暗影，所以用户不会感到任何不适。

<button class="bg-red-700 btn hover:bg-red-500 focus:outline-none focus:shadow-outline"> 前端晚间课 </button>

过渡设置

我确认通过设置伪类的悬停能够在光标移到按钮上时更改按钮的色彩。当光标悬停在按钮上时，你能够看到色彩。你能够通过应用过渡缓缓扭转按钮的色彩。上面通过设置 duration-1000，色彩会在 1 秒内迟缓变动。持续时间的多个值从 duration-75 到 duration-1000 注册。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded hover:bg-red-700 duration-1000"> 前端晚间课 </button>

变换设置

如果你想让按钮自身变大并通过悬停更改按钮的色彩，您能够应用 transform 和scaling 的Utilize Class 来实现。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded transform hover:scale-110 hover:bg-red-700 duration-1000"> 前端晚间课 </button>

群组设置

到目前为止的 hover 设置中，当光标通过指标元素时，hover 的变动就会产生在元素上，然而在 group 设置中，当光标通过父元素时，设置 hover 的子元素中就能够出现 hover 成果。

在上面的示例中，当光标通过设置了 group 的父元素时，因为为子元素设置的悬停设置，一个 p 标签元素的文本色彩变为红色，另一个变为蓝色。

<div class="group m-10 p-10 border hover:bg-gray-100">
  <p class="font-black group-hover:text-red-900"> 前端晚间课 </p>
  <p class="font-black group-hover:text-blue-900"> 前端晚间课 </p>
</div>

动画设置

只需将 animate-bounce 和 animate-pulse 设置为 class，您就能够轻松设置动画，而无需设置简单的 CSS。

tailwind.confing.js 配置文件

创立配置文件

应用 Tailwind CSS，你能够通过增加 Tailwind CSS Utilize Class中未蕴含的色彩、边距、宽度等进行自定义。自定义须要配置文件，但默认状况下不会创立，所以应用命令创立。

% npx tailwind init
  
   tailwindcss 2.1.2
  
   ✅ Created Tailwind config file: tailwind.config.js

下面的命令将创立一个 tailwind.config.js 文件。

增加色彩

module.exports = {
  theme: {
    extend: {
      colors: {cyan: '#9cdbff',}
    }
  },
  variants: {},
  plugins: []}

即便不应用配置文件，也能够通过将色彩用括号括起来来设置应用程序中不罕用的色彩，例如 bg-[#9cdbff]。

增加后，构建，npm run build

将按钮色彩从红色更改为青色。因为退出青色时没有设置色深，所以设置为 bg-cyan（从bg-red-700 改为bg-cyan）。

<button class="bg-cyan btn hover:bg-red-500 focus:outline-none focus:shadow-outline"> 前端晚间课 </button>

增加最大宽度并增加间距

你能够应用 max-width 设置浏览器上元素的最大宽度，但你可能心愿将其设置为与 Tailwind CSS 中默认注册的宽度不同的宽度。在这种状况下，请在 tailwind.config.js 以及色彩中进行其余设置。

theme: {
    extend: {
        colors:{'cyan':'#9cdbff',},
        maxWidth:{custom:'60rem',},
    },
    variants: {},
    plugins: []},

在 class 属性中应用时，设置max-w-custom。

能够应用间距设置宽度。

theme: {
    extend: {
        colors:{'cyan':'#9cdbff',},
        maxWidth:{custom:'60rem',},
        spacing:{76: '19rem',},
    },
    variants: {},
    plugins: []},

在 class 属性中应用时，设置为w-76。

即便你不应用配置文件，你也能够为那些不常常应用的款式设置一个诸如 p-[19rem] 之类的形容。

增加字体大小

最小的字体大小类是text-xs，然而如果你想增加一个更小的字体大小类，你能够这样做。

theme: {
    extend: {
        colors:{'cyan':'#9cdbff',},
        maxWidth:{custom:'60rem',},
        spacing:{76: '19rem',},
        fontSize:{xxs:['0.625em',{lineHeight:'1rem'}],
        },
    },
    variants: {},
    plugins: []},

如果要应用它，请在 class 属性中设置 text-xxs。

如何自定义其余值

我解释了如何增加色彩、最大宽度、宽度和字体大小，然而当我想增加框暗影时，我应该在哪里查看设置办法，例如？

首先，转到官网 Tailwind CSS 文档并进行搜寻。

在文档中搜寻
搜寻时，将显示 Box Shadow 页面。

盒子暗影页面

滚动时，您会找到 自定义。Tailwind CSS 中默认注册的值会显示在那里，所以如果你想用一个没有蕴含的值来设置它，请依据显示的设置办法将它增加到 tailwind.config.js 文件中。

Tailwind CSS 插件设置

Tailwind CSS 提供了一些官网插件。让咱们检查一下如何设置tailwindcss / line-clamp，这是插件之一。

当在浏览器上显示像上面这样的长句时，它也会在浏览器上显示多行。

<div class="m-20">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a in ad voluptatem necessitatibus et laborum, minus amet aliquid pariatur fugit recusandae neque illum voluptatibus repellendus est natus harum modi maxime eos aliquam eum ratione tempore? Sapiente nam corrupti odio quibusdam dolore harum consequatur sint mollitia at? Voluptas quae eligendi quia omnis porro totam laudantium dolorum. Ipsum quasi cupiditate expedita! Dolor ut voluptatibus quos ipsa beatae, accusamus, a incidunt provident, delectus tempore id ex placeat quo laboriosam iusto velit animi molestiae dignissimos sint perspiciatis quis accusantium maxime corrupti. Repellat hic error in totam consequuntur non magni maiores quibusdam quidem cum.
  </div>
</div>

如果你只想查看前几行而不是所有行，则能够应用插件 tailwindcss / line-clamp。

% npm install @tailwindcss/line-clamp

装置实现后，须要在 tailwind.config.js 中注册安装包的信息。

    plugins: [require('@tailwindcss/line-clamp'),
    ],

进行设置后，你将须要构建。运行 npm run build。构建实现后，应用插件的设置就实现了。

line-clamp 设置 line-clamp 后要显示的行数，如下所示。

<div class="m-20">
  <div class="line-clamp-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a in ad voluptatem 
// 略
  </div>
</div>

只能显示设置了 line-clamp-3 的 3 行。

至此，咱们曾经理解了什么是 Tailwind CSS？搭建 Tailwind CSS 环境、如何应用 Tailwind CSS？Tailwind CSS 定制以及插件的应用，置信大家对 Tailwind CSS 曾经有一个全面的意识，接下来就是入手写了。

正文完
css
发表至： css
2021-12-21
 0
关于css:uniapp引入阿里巴巴的彩色icon
关于css:什么是Sass
关于css:SegmentFault-思否技术周刊-不走寻常路的-CSS
关于vue.js:Fower-一个可在-Vue-和-React-方便使用的-CSS-in-JS-库