Tailwind CSS 入门指南：打造现代化响应式网页

什么是Tailwind CSS？ Tailwind CSS 是一款实用类别优先（Utility-First）的CSS 框架，透过直接在HTML 标签中添加CSS 类别，来实现设计与布局，减少撰写自定义CSS 的需求。 为什么选择Tailwind CSS？ 高效率开发：透过CSS 类别组合，即可快速建
  • 本文作者
  • 文章发布日期 2023-08-24 11:23
  • 热度 2
  • 作者心情 不喜不悲
  • 本文共计
  • 预计阅读

什么是 Tailwind CSS？

Tailwind CSS 是一款实用类别优先（Utility-First）的 CSS 框架，透过直接在 HTML 标签中添加 CSS 类别，来实现设计与布局，减少撰写自定义 CSS 的需求。

为什么选择 Tailwind CSS？

  • 高效率开发：透过 CSS 类别组合，即可快速建立 UI，而无需手写大量 CSS 样式。

  • 灵活的响应式设计：内建响应式类别，可轻松适配不同装置尺寸。

  • 高度可自订：可透过 tailwind.config.js 调整布局、颜色、字体等设计变数。

  • 精简最终 CSS：透过 PurgeCSS 自动移除未使用的 CSS 类别，优化效能。

如何安装 Tailwind CSS？

通过 CDN 快速引入（适用于测试）

如果只是想快速测试 Tailwind CSS，可在 HTMLhead 中加入以下 CDN 连结：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Demo</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-center p-6">
    <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind CSS!</h1>
</body>
</html>

在项目中安装 Tailwind CSS（推荐）

如果你要在前端项目或 React/Vue 框架中使用 Tailwind CSS，建议通过 NPM 安装。

步骤 1：初始化项目并安装 Tailwind CSS

mkdir my-tailwind-project && cd my-tailwind-project
npm init -y  # 初始化 Node.js 
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p  # 产生 Tailwind 配置文档 PostCSS 配置文档

步骤 2：设定 Tailwind 配置

开启 tailwind.config.js，确保 content 属性包含专案内的 HTML、JS 或 Vue/React 组件档案。

module.exports = {
  content: ["./*.html", "./src/**/*.{js,ts,jsx,tsx}", "./components/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

步骤 3：在 CSS 档案中引入 Tailwind

在 styles.css 项目中加入：

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

步骤 4：编译 Tailwind 并启动开发伺服器

npx tailwindcss -o output.css --watch

这样就能开始在 HTML 或 JSX 中使用 Tailwind CSS 类别了！

Tailwind CSS 基本用法

设定字体与颜色

<h1 class="text-4xl font-bold text-indigo-600">Tailwind 让开发更简单！</h1>

布局与间距

<div class="container mx-auto p-4 bg-gray-200">
  <p class="m-4 p-4 bg-white shadow-lg rounded-lg">這是一个使用 Tailwind CSS 布局的案例</p>
</div>

响应式设计

<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
  <p>这个区块会根据屏幕大小自动调整宽度。</p>
</div>

按钮样式

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  按我
</button>

总结

Tailwind CSS 透过实用类别取代传统 CSS 规则，让开发者能够更灵活、快速地建立现代化网页。