Tailwind CSS 快速了解与主要用法教程

Tailwind CSS 是一个功能类优先的 CSS 框架。它不提供预设组件，而是提供大量可组合的小型 CSS 类，让你直接在 HTML 中快速建立自定义设计。

一、安装 Tailwind CSS

方式 ：使用 CDN

   

Hello Tailwind!

方式 ：通过 npm 安装

# 初始化项目npm init -y# 安装依赖npm install -D tailwindcss postcss autoprefixer# 初始化 Tailwind 配置文件npx tailwindcss init -p

配置 tailwind.config.js

/** @type {import.Config} */module.exports = { content:。me: { extend: {},},plugins:,}

配置入口 CSS 文件

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

建立命令

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

或配合建立工具自动集成。

二、主要用法

. 布局

功能示例类

• 显示方式这方面，block,inline,flex,grid,hidden
• 从容器宽度来看，w-full,w-/,max-w-md
• 再看高度，h-,min-h-screen
• 从间距来看。m-,p-,mt-,px-

Logo 

. Flexbox 与 Grid

Item 

Item 

₹₹


;Card，-- ... --;

. 颜色与背景

𠮛utton class="- hover:bg-" text-" font-" rounded"> Click me

. 文字样式