【前端学习】TailwindCSS 基础使用 (入门)

Trigger0215

已于 2024-09-09 10:32:34 修改

阅读量1.1k

点赞数 24

文章标签：前端 css npm node.js

于 2024-09-09 10:29:57 首次发布

本文链接：https://blog.csdn.net/LZwarning0215/article/details/142045727

版权

一、介绍

TailwindCSS 是一种现代的前端样式框架，它以“原子化”设计理念为核心，通过提供一系列可重复使用的CSS 类，帮助开发人员更快速地构建美观且响应式的用户界面。且提倡Mobile First ，即移动先行。

它的特点是：原子化设计 (即将样式划分为最小的单元)；大量预定义类；以及语义化命名。

同时，TailwindCSS 还可以做到让程序员不离开HTML 页面即可书写css ，构建所需要的页面。下面是它的官方网站：

TailwindCSS 官方网站

二、工作原理

TailwindCSS 的工作原理是扫描所有HTML 文件、JavaScript 组件以及任何模板中的 CSS 类 (class) 名，然后生成相应的样式代码并写入到一个静态CSS 文件中。

换句话说，就是：在文件中用到的类就自动为你添加到CSS 文件中，没有用到的类则不会添加；这样做就可以最大程度的控制文件的大小。

接下来让我们来看看如何进行安装及最基本的使用。

三、安装

1. 通过npm 命令来安装 tailwindcss

如果你的系统还没有安装Node，那么你需要先去安装Node 之后，才能使用npm 命令！

注意：安装的位置在你当前项目的文件夹根目录下！

我们这里演示的根目录名称为：TailwindCSS 。

npm install tailwindcss -D

如下图：

2. 初始化

安装完成后，我们需要对 tailwindcss 进行初始化 (initialization) ，通过这个命令来创建我们自己的 tailwindcss.config.js 配置文件：

npx tailwindcss init

注意：npx 并不是npm 的拼写错误！npx 是npm 5.2.0及更高版本中包含的一个命令行工具，用于执行本地安装的或在线安装的Node.js包中的命令。npx可以在不需要全局安装的情况下直接运行某个包中的命令，这使得它更加灵活，不需要事先安装一个包就能立即运行它的命令。

示例如下图：

在这里建议小伙伴们，将自己的html、css、js 等文件均放在一个文件夹内 (例如src 文件夹) 。之所以这样做会在后面解释原因。

当初始化完成创建文件成功之后，会在项目的根目录内生成一个 tailwindcss.config.js 文件，其中内容如下：

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

3. 配置 tailwindcss.config.js 文件

此文件中的 content，它的作用是用于添加所有模版文件的路径。由于在这里我们将自己的文件放在了src 目录内，所以在这里我们的路径是：

// ...
content: ["./src/**/*.{html,js}"],
// ...

content 内这句代码的意思是：搜索src 目录及其子目录下所有后缀名为html 或js 的文件。它的作用便是，我们在文件中所使用到的类，全部都会被 tailwindcss 搜索到，然后交给它来为我们生成对应的静态CSS 文件。

4. 创建主CSS 文件，添加加载 tailwindcss 的指令

在这里我们创建一个名为 input.css 的文件，并且注意是创建在src 目录内 (当然你同样可以在src 目录创建一个css 文件夹来存放所有的css 文件) 。

然后在 input.css 文件中添加如下指令：

/* input.css */
/* 添加每一个Tailwind功能模块 */

/* 引入基础样式 */
@tailwind base;

/* 引入组件样式 */
@tailwind components;

/* 引入工具样式 */
@tailwind utilities;

5. 构建

下一步，通过运行以下的命令来扫描模版文件中所有出现的CSS 类(class) 并且编译CSS 代码。

注意：这里的命令行内的 input.css 路径需要修改为你实际对应的路径！

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

这里需要注意的是，自己创建的主CSS 文件(input.css) 要放在前面，TailwindCSS 构建的文件(这里我们命名为output.css) 放在后面，且该文件名和路径可以由你自己来决定。(千万不要忘记了命令行内的 -i 、 -o 和 --watch ！)

实际演示如下：

6. 文件放在src 目录下的原因

先给大家展示一下demo 的目录结构：

Tips：这里之所以将我们自己的文件都放在src 目录内，是因为：如果你将这些文件都放在根目录内，当你执行构建命令时，你的content 配置可能会是 ./**/*.{html,js} ，这样做的话 TailwindCSS 会将根目录下的 node_modules 文件夹内的对应文件全部搜索了一遍，这会使你生成的CSS 文件内出现很严重的样式问题并且增加文件的大小。所以当你如此构建时会出现警告 (warning) ：