技术篇：从零开始掌握 Tailwind CSS

原创

已于 2024-11-14 21:34:21 修改 · 2.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-10-26 23:36:44 首次发布

难度等级： ⭐

学习目标：初步掌握 Tailwind CSS

本文是 Next.js 全栈独立开发指南 系列教程的第三篇，完整教程请点击 https://xiaobot.net/p/indieguide

什么是 Tailwind CSS

Tailwind CSS 是一个高度实用 CSS 框架。它的核心理念是「让你写更少的自定义 CSS」，通过提供原子化的实用工具类，使开发者可以直接在 HTML 中组合和使用这些类来完成页面的样式设置，而不需要再编写额外的 CSS 代码。这种方法的优点是提高了开发效率，减少了重复代码的编写，并且有助于保持样式的一致性，帮助开发者快速构建复杂的用户界面。

Tailwind CSS 的安装

Tailwind CSS 的安装方式有很多种，比如 Tailwind CLI、Post CSS、Framework、CDN 等。

使用 Tailwind CLI 安装

如果你的项目使用了 npm 或者 yarn，那么可以通过以下命令安装 Tailwind CSS：

yarn add tailwindcss -D

安装完成后，可以使用 Tailwind CSS 官方提供的 CLI 工具来生成一个配置文件：

npx tailwindcss init

这会在你的项目根目录下生成一个 tailwind.config.js 文件，你可以在其中自定义 Tailwind 的配置，例如颜色、字体、间距等。

使用 CDN

如果你不想使用构建工具，可以直接在 HTML 文件中通过 CDN 引入 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 Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    tailwind.config = {
     
     
      theme: {
     
     
        extend: {
     
     
          colors: {
     
     
            base: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
    <div