返回介绍
文江博客 开发文档 Tailwind CSS 中文文档 v3.4.4 文章详情

安装

发布于 2024-07-30 22:16:08 字数 9440 浏览 0 评论 0 收藏 0

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

他快速、灵活、可靠，没有运行时负担。

安装

安装 Tailwind 命令行工具（CLI）

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

  1. 安装 Tailwind CSS

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

    Terminal
    npm install -D tailwindcssnpx tailwindcss init

  2. 配置模板文件的路径

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

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

  3. 将加载 Tailwind 的指令添加到你的 CSS 文件中

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

    src/input.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  4. 开启 Tailwind CLI 构建流程

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

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

  5. 在你的 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>

接下来

熟悉一些让 Tailwind CSS 区别于 传统方式编写 CSS 的核心概念。

  • 工具类优先（Utility-First）的基本原理

    遵循工具类优先的流程（utility-first workflow）并基于一套具有约束性的基本工具类来构建 复杂的组件。

  • 响应式设计

    使用响应式布局标识符（responsive modifiers）构建完全支持响应式布局的用户界面，以适应任何大小的 屏幕。

  • 鼠标悬停、聚焦以及其他状态

    使用条件标识符（conditional modifiers）可以为处于交互状态（如鼠标悬停、聚焦等）中的元素设置 样式。

  • 夜间模式（Dark Mode）

    通过在 HTML 代码中添加夜间模式标识符（dark mode modifier）直接让你的网站支持夜间模式。

  • 重用样式

    通过创建可重用的抽象来管理冗余并保持项目的可维护性。

  • 自定义整个框架

    通过自定义整个框架使其匹配你的需求；使用你的自定义样式对其进行扩展。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文