TailwindCSS 学习笔记

文章目录

[TailwindCSS 学习笔记](#TailwindCSS 学习笔记)
- 1.安装和使用
- - [安装 Tailwind CSS](#安装 Tailwind CSS)
  - 配置模板文件的路径
  - [将加载 Tailwind 的指令添加到你的 CSS 文件中](#将加载 Tailwind 的指令添加到你的 CSS 文件中)
  - [开启 Tailwind CLI 构建流程](#开启 Tailwind CLI 构建流程)
  - [在你的 HTML 代码中使用 Tailwind](#在你的 HTML 代码中使用 Tailwind)

TailwindCSS 学习笔记

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

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

1.安装和使用

安装 Tailwind CSS

javascript 复制代码

npm install -D tailwindcss
// 根据需要是否需要引入ts
npm install -D @tailwindcss/postcss

npx tailwindcss init

npx tailwindcss init 会创建tailwind.config.js 配置文件。

配置模板文件的路径

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

javascript 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // 若使用 App Router，需添加：
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // 定制大屏科技蓝、警示红等颜色
        primary: "#0ea5e9", // 主色调（科技蓝）
        danger: "#ef4444",   // 警示红
        warning: "#f59e0b",  // 警告黄
        success: "#10b981",  // 成功绿
        dark: {
          900: "#0f172a",    // 大屏背景色
          800: "#1e293b",    // 卡片背景色
        },
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"], // 全局字体
      },
    },
  },
  // 强制启用 JIT 模式（Tailwind v3 核心，确保只生成用到的样式）
  mode: "jit",
  plugins: [],
}

如果存在postcss.config.mjs文件需要修改配置

js 复制代码

const config = {
  plugins: {
    "tailwindcss": {},
    "@tailwindcss/postcss": {},
  },
};

export default config;

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

一般添加到globals.css

css 复制代码

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

可以自定义样式

css 复制代码

/* 大屏全局样式（替代之前的自定义） */
body {
  @apply bg-gray-900 text-gray-200 font-sans;
}

/* 组件卡片样式（用 Tailwind 类直接定义） */
.dashboard-card {
  @apply bg-dark-800/80 border border-primary rounded-lg shadow-lg p-4 backdrop-blur-sm;
}

/* 适配暗黑模式的文本颜色 */
.text-dashboard {
  @apply text-gray-200;
}

开启 Tailwind CLI 构建流程

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

cmd 复制代码

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

在你的 HTML 代码中使用 Tailwind

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

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>