厦门网站开发建设新闻头条今日要闻10条
官网 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>