网站常州建设在线制作网页网站
一、Tailwind CSS 概述
-
Tailwind CSS 是一个功能优先的 CSS 框架，它提供了大量的实用类（utility classes），允许开发者通过组合这些类来快速构建用户界面
-
Tailwind CSS 与传统的 CSS 框架不同（例如，Bootstrap），Tailwind 不提供预定义的组件，而是通过细粒度的类来控制样式，从而实现高度定制化的设计
二、Tailwind CSS 体验案例
1、安装 Tailwind CSS
- 执行如下指令，安装 Tailwind CSS
npm install -D tailwindcss
2、初始化 Tailwind CSS
- 执行如下指令，初始化 Tailwind CSS
npx tailwindcss init
- 初始化完成后，会生成
tailwind.config.js配置文件
/** @type {import('tailwindcss').Config} */
module.exports = {content: [],theme: {extend: {},},plugins: [],
}
3、配置 Tailwind CSS
- 在
tailwind.config.js配置文件中，自定义 Tailwind 的默认配置
/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend: {},},plugins: [],
};
4、引入 Tailwind CSS
- 在 CSS 文件
src/input.css中引入 Tailwind 的基础样式、组件和实用类
@tailwind base;
@tailwind components;
@tailwind utilities;
5、构建 Tailwind CSS
- 执行如下指令，构建 Tailwind CSS，由
src/input.css文件构建得到src/output.css文件
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
6、使用 Tailwind CSS
- 再 HTML 文件
src/index.html中使用src/output.css
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link href="./output.css" rel="stylesheet" /><title>index</title></head><body><h1 class="text-3xl font-bold underline">Hello world!</h1></body>
</html>
三、Tailwind CSS 体验案例解读
1、tailwind.config.js 配置文件解读
/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend: {},},plugins: [],
};
（1）content
-
content 是一个数组，用于指定 Tailwind CSS 应该扫描哪些文件以自动检测并包含哪些 CSS 类
-
这基于 purgecss 的功能，用于移除未使用的 CSS，从而减小最终 CSS 文件的大小
-
在这里配置为
["./src/**/*.{html,js}"]，这是一个 glob 模式，它匹配 src 目录下的所有.html和.js文件，其中**表示匹配任意深度的子目录
（2）theme
-
theme 对象用于自定义 Tailwind CSS 的主题
-
可以在这里添加、修改、删除 Tailwind CSS 的默认主题变量，例如，颜色、间距、字体大小、边框半径等
-
extend 属性用于扩展 Tailwind CSS 的默认主题，而不是完全覆盖它
（3）plugins
- plugins 数组用于添加 Tailwind CSS 插件，Tailwind CSS 插件用于扩展 Tailwind CSS 的功能
2、构建 Tailwind CSS 解读
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
-
npx tailwindcss：执行 Tailwind CSS 的 CLI 命令 -
-i ./src/input.css：-i用于指定 Tailwind CSS 应该读取的源文件路径，这里 Tailwind CSS 将读取src/input.css文件中的样式信息，并根据tailwind.config.js文件中的配置进行处理 -
-o ./src/output.css：-o用于指定 Tailwind CSS 处理后的文件应该保存到的路径 -
--watch：告诉 Tailwind CSS 的以监视模式运行，在监视模式下，Tailwind CSS 将持续监视输入文件及其依赖项的变化（例如，tailwind.config.js配置文件、任何通过@tailwind指令引入的文件），一旦检测到变化，它将自动重新编译输出文件