Tailwind CSS框架入门

2024年7月4日[Tailwind CSS快速指南]

Tailwind CSS框架预定义了一系列CSS样式名，例如： flex、pt-4、text-center、rotate-90等等，它们能够被组合起来直接应用在HTML或是其它模板中以满足你的任何设计。好处是你不需要定义额外的CSS样式文件，使得设计和维护更方便。甚至你都不需要熟悉 CSS样式设计。更多内容参考其官网：Tailwind CSS 。

Tailwind CSS通过扫描你 HTML、JavaScript或是其它模板文件，生成相应的CSS样式文件。它非常的快速、灵活和可靠，不需要其它额外的运行库。

这里是一个step-by-step的教程，使你能够在你的项目中快速的使用Tailwind CSS框架，包括建立开发环境，使用预定义的CSS样式名设置你的web元素，以及如何使用@apply指令对静态网页工具生成的内容设定它的样式，例如 Hugo 生成的内容。

完成这个教程后，你将会创建好下面的这个页面：

创建你的网站

使用静态网站生成工具Hugo，轻松创建你的网站。

开始创建演示

安装

根据其官方安装指南安装Node.js和Tailwind CSS。你也可以参考我的安装过程，但是使用的这些命令在未来可能会发生变化。

安装Node.js

这是官方的Node.js安装指南： https://nodejs.org/en/download/package-manager

以在Linux上使用NVM (Node Version Manager)安装为例：

# 安装NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 下载安装Node.js
nvm install 20

# 验证安装的Node.js版本号
node -v # should print `v20.13.1`

# 验证安装的NPM版本号
npm -v # should print `10.5.2`

安装Tailwind CSS

这是官方的Tailwind CSS安装指南： https://tailwindcss.com/docs/installation

你也可以使用CDN开始使用Tailwind CSS而不需要安装任何软件，但是这不是我喜欢的方式，因为我不希望在我的网页中包含任何额外的不需要的CSS样式定义。我更倾向于使用Tailwind CLI工具生成我们使用到的必要的样式定义。

安装Tailwind CLI:

npm install -D tailwindcss

创建一个新的工程

创建一个新目录

mkdir tailwindcss-demo
cd tailwindcss-demo

配置模板文件路径

生成初始的配置文件tailwind.config.js

npx tailwindcss init

编辑上述文件以包含模板文件路径（高亮部分）

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加Tailwind指令到你的CSS文件

创建一个CSS文件index.css，内容如下：

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

运行Tailwind CLI监视进程

运行CLI工具，它将在你的模板文件中扫描任何用到的样式名称，并生成CSS样式文件。

npx tailwindcss -i ./index.css -o ./app.css --minify --watch

有两个选项可以应用：

--watch: 监视模板文件的改动重新生成样式文件
--minify: 最小化样式文件

在你的网页中使用Tailwind CSS

使用预定义CSS样式

创建一个新的HTML文件index.html
在HTML中添加CSS样式文件app.css的引用
应用预定义CSS样式设置你的网页元素

下面是HTML文件index.html完整的代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="app.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
  <div class="container mx-auto">
    <section class="w-full mt-5 flex flex-col items-center">
      <img src="glider.png" class="w-96">
      <div class="text-center">
        <h1 class="p-5 text-3xl font-bold">创建你的网站</h1>
        <p class="text-gray-900">使用静态网站生成工具Hugo，轻松创建你的网站。</p>
        <a href="#" class="mt-5 px-3 py-1 border bg-orange-600 rounded-md font-semibold text-white">开始创建</a>
        <a href="#" class="mt-5 px-3 py-1 border border-gray-900 rounded-md ml-8 font-semibold text-gray-900">演示</a>
      </div>
    </section >
  </div>
</body>
</html>

我将会在后面的文章中解释这些预定义的样式是如何工作的。现在你可以试着在你的浏览器中打开上面这个文件看下最终的效果。如果有任何新的改动，别忘了刷新一下页面。

使用`@apply`指令

如果你的网站内容是通过工具，例如： Hugo，生成的，我们没法像上述方法那样直接加入样式名称。这种情况下，我们只能使用@apply指令来设置相应的样式。

例如，这是生成的目录的代码：

<nav id="TableOfContents">
<ul>
  <li>
    <a href="#installation">Installation</a>
    <ul>
      <li><a href="#install-nodejs">Install Node.js</a></li>
      <li><a href="#install-tailwind-css">Install Tailwind CSS</a></li>
    </ul>
  </li>
  <li>
    <a href="#setup-your-project">Setup Your Project</a>
    <ul>
      <li><a href="#create-a-directory">Create a directory</a></li>
      <li><a href="#configure-your-template-paths">Configure your template paths</a></li>
    </ul>
  </li>
</ul>
</nav>

我们可以在index.css中添加如下指令来设置它的样式：

#TableOfContents {
  @apply my-10;
}

#TableOfContents a {
  @apply no-underline;
}

你可以试着从Tailwind文档找到合适的样式名称来设置你的目录样式。

就是这样！你已经建立好使用Tailwind CSS的开发环境。做一个快乐的码农！