Tailwind CSS 4【实用教程】

官网 https://tailwindcss.com/docs/installation/using-vite

Tailwind CSS 是一个实用优先的 CSS 框架

特色

• 原子化样式类名
• 可深度定制主题
• 插件丰富

安装+配置+导入

vite 中

pnpm add tailwindcss @tailwindcss/vite

vite.config.ts 中配置

import tailwindcss from '@tailwindcss/vite'

  plugins: [
    tailwindcss(),
  ],

全局 css 文件中导入

@import "tailwindcss";

Nuxt.js 中

https://nuxt.com/modules/tailwindcss

npx nuxi@latest module add tailwindcss

安装 vscode 插件

Tailwind CSS IntelliSense

常用样式类

布局

• flex：将元素设置为 flex 布局。
• flex - [direction]：设置 flex 子项的排列方向，如flex - row（水平排列）、flex - col（垂直排列）。
• justify - [content]：设置 flex 子项的水平对齐方式，如justify - center（水平居中）。
• items - [align]：设置 flex 子项的垂直对齐方式，如items - center（垂直居中）。
• grid：将元素设置为 grid 布局。
• grid - cols - [number]：设置网格列数，如grid - cols - 3（三列网格）。

文本

• text - [size]：设置文本大小，如text - xl（1.25rem）。
• text - [color]：设置文本颜色，如text - blue - 500。
• font - [weight]：设置字体粗细，如font - bold。
• italic：设置字体为斜体。

背景与边框

• bg - [color]：设置背景颜色，如bg - gray - 100。
• border - [width]：设置边框宽度，如border - 2。
• border - [color]：设置边框颜色，如border - red - 400。
• rounded - [size]：设置边框圆角，如rounded - lg。

响应式

• sm：小屏幕（宽度≥640px）。
• md：中等屏幕（宽度≥768px）。
• lg：大屏幕（宽度≥1024px）。
• xl：特大屏幕（宽度≥1280px）。

<div class="w - full sm:w - 1/2 md:w - 1/3 lg:w - 1/4 xl:w - 1/5">
  这个元素的宽度会根据屏幕大小变化。
</div>

交互

• hover:：悬停状态。
• focus:：聚焦状态。
• active:：激活状态。

<button class="bg - blue - 500 text - white p - 2 rounded hover:bg - blue - 600 focus:outline - none focus:ring - 2 focus:ring - blue - 400">
  悬停和聚焦有不同效果的按钮
</button>