Tailwind CSS 安装

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。

无极低码

785人浏览 · 2024-03-02 09:00:00

无极低码 · 2024-03-02 09:00:00 发布

安装

安装 Tailwind CSS

通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。

Terminal
```
npm install -D tailwindcssnpx tailwindcss init
```
配置模板文件的路径

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

tailwind.config.js

解释
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
将加载 Tailwind 的指令添加到你的 CSS 文件中

在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

src/input.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
开启 Tailwind CLI 构建流程

运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

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

在你的 HTML 代码中使用 Tailwind 吧

在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类来为你的内容设置样式了。

src/index.html

解释

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

技术共进，成长同行——讯飞AI开发者社区

更多推荐

1747张YOLO标注奶牛水牛识别数据集：精准标注跨场景动物检测模型训练专用计算机视觉数据集，助力智慧农业与畜牧业AI算法研发

讯飞AI开发者社区

YOLOv8【卷积创新篇·第25节】Capsule Network胶囊卷积网络：让检测器拥有“空间想象力”！

讯飞AI开发者社区

YashanDB在医疗行业的应用与机遇

随着医疗行业数据规模的持续扩展和智能医疗应用的深化，数据库系统的性能和可靠性成为医疗信息化的核心竞争力。未来，随着医疗场景对人工智能、大数据实时分析等技术的不断融合，YashanDB将持续深化HTAP能力，增强分布式协作与资源整合能力，通过不断优化系统性能和安全保障，推动医疗行业数据管理水平的全面提升，为智慧医疗服务的广泛应用奠定坚实基础。YashanDB在医疗行业中，基于强大的逻辑架构，实现了客