SuperAPI AI 工具集

tailwindcss

前端与建站

查看项目

更新于 10-16 01:12

技能介绍

用途:Tailwind CSS 是工具类优先的 CSS 框架,用于快速构建界面。适合做移动优先的响应式布局、深色模式与主题定制、统一间距/颜色/字体的设计系统,以及为 React、Vue、Svelte 等框架组件写样式、快速原型和状态样式(hover、focus、disabled 等)。

主要能力:提供低层实用类直接写在 HTML 上,无需自定义 CSS 与命名约定,构建时扫描源码只生成实际用到的类,自动消除无用代码,运行时零开销。内置默认设计系统:18 套色板每套 11 档(50–950)、从 0.25rem 到 96rem 的间距、字号字重行高、移动优先断点、阴影与圆角。支持通过 CSS 的 @theme 指令自定义颜色、字体、间距、断点、阴影。

使用方式:以 Vite 为例,先安装依赖:npm install -D tailwindcss @tailwindcss/vite,在 vite.config.ts 中引入 @tailwindcss/vite 插件,在 CSS 中写 @import "tailwindcss",再在 HTML 引用该样式表。Next.js 可用 npx create-next-app@latest --tailwind,Astro 可用 npx astro add tailwind,也可用 PostCSS:npm install -D tailwindcss postcss autoprefixer,再 npx tailwindcss init -p。旧式配置需在 content 中列出扫描路径,如 ./src/**/*.{js,jsx,ts,tsx}。

限制:本资料未提供收费、价格与平台信息。文中示例针对特定版本与配置方式,实际行为可能随版本变化。