tailwind

用途

Tailwind CSS 是一个实用优先（utility-first）的 CSS 框架，提供低层级工具类，让开发者无需编写 CSS 即可构建自定义设计。它内置响应式设计、深色模式、通过配置进行定制，并能与主流现代框架集成。

主要能力

实用优先方法：提供单一用途的工具类，直接映射到 CSS 属性，涵盖布局（Flexbox、Grid）、间距、排版、颜色等。
响应式设计：采用移动优先的断点系统，默认断点为 sm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px)，并支持自定义断点。
深色模式：支持 class 策略（推荐）和 media 策略（跟随系统偏好）。
配置定制：可通过 tailwind.config.js 扩展颜色、间距、字体、字号、圆角、阴影、动画、关键帧等主题。
自定义工具类与变体：通过插件 API 添加自定义工具类、组件和变体。
官方插件：提供 @tailwindcss/forms、@tailwindcss/typography、@tailwindcss/aspect-ratio 等插件。
性能优化：支持内容配置、safelist 动态类、JIT 模式（v3+ 默认）按需生成样式，以及生产环境压缩。

使用方式

安装（npm / yarn / pnpm）：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 tailwind.config.js：

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

基础 CSS 设置（styles/globals.css）：

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

首个组件示例：

function Button({ children, variant = 'primary' }) {
  const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
    danger: "bg-red-600 text-white hover:bg-red-700"
  };

  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  );
}

适用场景

使用一致设计系统进行快速原型开发
基于组件的框架（React、Vue、Svelte）
需要响应式和深色模式支持的项目
希望避免维护 CSS 文件的团队
具有标准化间距/颜色的设计系统

限制

团队不熟悉实用优先方法时存在学习曲线
项目需要大量自定义 CSS 动画时需考虑替代方案
需要支持旧版浏览器（IE11）时不适用
在没有构建流程的情况下要求最小 CSS 体积时不适用

框架集成

React / Next.js：可通过 npx create-next-app@latest my-app --tailwind 创建，或在现有项目中安装依赖并初始化。
SvelteKit：可通过 npx sv create my-app 选择 Tailwind CSS 选项，或在现有项目中安装依赖并初始化。

以上内容均基于提供的资料整理，未提供的功能、收费、价格、平台或效果信息暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制

框架集成