Tailwind CSS 开源项目教程

2026-01-19 11:46:18作者：何举烈Damon

项目介绍

Tailwind CSS 是一个实用优先的 CSS 框架，旨在通过提供一组可直接在 HTML 中使用的低级实用类来快速构建用户界面。它允许开发者以更高效的方式构建定制设计，而无需离开 HTML 文件。Tailwind CSS 的设计理念是“实用优先”，这意味着它提供了一系列的 CSS 类，这些类可以直接应用于 HTML 元素，从而快速构建布局和设计。

项目快速启动

安装 Tailwind CSS

首先，确保你已经安装了 Node.js 和 npm。然后，在你的项目目录中运行以下命令来安装 Tailwind CSS：

npm install -D tailwindcss

初始化配置文件

生成 tailwind.config.js 配置文件：

npx tailwindcss init

配置模板路径

在 tailwind.config.js 文件中，配置模板路径：

module.exports = {
  content: [
    "./src/**/*.{html,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

引入 Tailwind CSS

在你的 CSS 文件中引入 Tailwind CSS：

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

构建项目

运行以下命令来构建你的项目：

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

使用 Tailwind CSS

在你的 HTML 文件中使用 Tailwind CSS 类：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS 示例</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-center p-5">
  <h1 class="text-3xl font-bold underline">
    你好，Tailwind CSS!
  </h1>
</body>
</html>

应用案例和最佳实践

响应式设计

Tailwind CSS 提供了强大的响应式设计功能，通过在类名中添加前缀，可以轻松实现不同屏幕尺寸下的样式调整。例如：

<div class="bg-red-500 md:bg-blue-500 lg:bg-green-500">
  这是一个响应式背景颜色示例。
</div>

自定义主题

通过修改 tailwind.config.js 文件，可以自定义主题颜色、字体等：

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1a202c',
      },
    },
  },
}

组件库

Tailwind CSS 可以与各种组件库结合使用，例如 Tailwind UI，它提供了一系列高质量的预构建组件：

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="avatar.jpg" alt="用户头像">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <div class="text-xl leading-tight">John Doe</div>
      <div class="text-sm leading-tight text-gray-600">软件工程师</div>
    </div>
  </div>
</div>

典型生态项目

Tailwind UI

Tailwind UI 是一个基于 Tailwind CSS 的高质量组件库，提供了大量的预构建组件和模板，适用于各种项目需求。

Headless UI

Headless UI 是一个完全无样式的、完全可访问的 UI 组件库，与 Tailwind CSS 完美集成，适用于需要高度定制的 UI 组件

tailwindcss

Tailwind CSS module for Nuxt

项目地址：https://gitcode.com/gh_mirrors/tai/tailwindcss

登录后查看全文

Tailwind CSS 开源项目教程

项目介绍

项目快速启动

安装 Tailwind CSS

初始化配置文件

配置模板路径

引入 Tailwind CSS

构建项目

使用 Tailwind CSS

应用案例和最佳实践

响应式设计

自定义主题

组件库

典型生态项目

Tailwind UI

Headless UI

热门内容推荐

项目优选

Tailwind CSS 开源项目教程

项目介绍

项目快速启动

安装 Tailwind CSS

初始化配置文件

配置模板路径

引入 Tailwind CSS

构建项目

使用 Tailwind CSS

应用案例和最佳实践

响应式设计

自定义主题

组件库

典型生态项目

Tailwind UI

Headless UI

相关内容推荐

热门内容推荐

项目优选