Tailwind CSS 入门

Tailwind CSS 入门

1. 安装 Tailwind CSS

   通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。

   Terminal

   npm install -D tailwindcss
   npx tailwindcss init
   

2. 配置模板文件的路径

   在 tailwind.config.js 配置文件中添加所有模板文件的路径。

   tailwind.config.js

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

3. 将加载 Tailwind 的指令添加到你的 CSS 文件中

   在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

   src/input.css

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

4. 开启 Tailwind CLI 构建流程

   运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

   Terminal0

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

5. 在你的 HTML 代码中使用 Tailwind 吧

   在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类 来为你的内容设置样式了。

   src/index.html

   <!doctype html>
   <html>
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="./output.css" rel="stylesheet">
   </head>
   <body>
     <h1 class="text-3xl font-bold underline">
       Hello world!
     </h1>
   </body>
   </html>
   

完成安装后接下来演示几个常见的TailWind CSS

1. 布局（Flexbox）

html

<!-- 水平居中 + 垂直居中 -->
<div class="flex items-center justify-center h-screen bg-gray-100">
  <div class="p-6 bg-white rounded-lg shadow">居中内容</div>
</div>

• flex → display: flex
• items-center → 垂直居中（交叉轴）
• justify-center → 水平居中（主轴）
• h-screen → 高度 100vh

---

2. 网格布局（Grid）

html

<!-- 三列响应式网格：手机1列，中屏2列，大屏3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
  <div class="bg-blue-100 p-4 rounded">卡片1</div>
  <div class="bg-blue-100 p-4 rounded">卡片2</div>
  <div class="bg-blue-100 p-4 rounded">卡片3</div>
</div>

• grid-cols-* → 列数
• gap-4 → 间距
• md: / lg: → 响应式断点

---

3. 间距（Spacing）

html

<!-- 外间距 mt-4，内间距 px-6 py-3 -->
<button class="mt-4 px-6 py-3 bg-blue-500 text-white rounded-lg">
  提交
</button>

Tailwind 的间距刻度：1=0.25rem、2=0.5rem、4=1rem、6=1.5rem、8=2rem…

前缀含义：

• m 外边距，p 内边距
• t/b/l/r/x/y 方向
• 例：mt-4（上）、px-6（左右）、py-3（上下）

---

4. 文字排版

html

<h1 class="text-3xl font-bold text-gray-900">大标题</h1>
<p class="text-base text-gray-600 leading-relaxed">正文内容，行高宽松。</p>
<span class="text-sm font-medium text-blue-500 underline">链接样式</span>

• text-3xl 字号、font-bold 加粗
• text-gray-600 文字颜色
• leading-relaxed 行高
• underline 下划线

---

5. 颜色与背景

html

<div class="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-6 rounded-xl">
  渐变背景卡片
</div>

• bg-{color}-{shade}：如 bg-red-500
• text-{color}-{shade}：文字色
• bg-gradient-to-r from-... to-...：渐变

---

6. 边框与圆角

html

<div class="border border-gray-300 rounded-full w-16 h-16 flex items-center justify-center">
  <span class="text-xl">👤</span>
</div>

• border 1px 边框，border-gray-300 颜色
• rounded-full 圆形，rounded-lg 大圆角
• w-16 h-16 固定尺寸

---

7. 阴影与悬停效果

html

<button class="px-4 py-2 bg-indigo-600 text-white rounded-md
               shadow hover:bg-indigo-700 hover:shadow-lg
               transition duration-200">
  悬停试试
</button>

• shadow / shadow-lg 阴影
• hover: 悬停状态
• transition + duration-200 过渡动画

---

8. 响应式设计

html

<!-- 小屏红、中屏绿、大屏蓝 -->
<div class="bg-red-500 md:bg-green-500 lg:bg-blue-500 h-20"></div>

断点前缀：sm:(640px) md:(768px) lg:(1024px) xl:(1280px) 2xl:(1536px)

---

9. 暗色模式

html

<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-4">
  支持暗色模式
</div>

需要在配置或 <html> 上启用 dark 类。

---

10. 一个综合示例：卡片组件

html

<div class="max-w-sm mx-auto bg-white rounded-2xl shadow-md overflow-hidden
            hover:shadow-xl transition-shadow">
  <img class="w-full h-40 object-cover" src="cover.jpg" alt="封面" />
  <div class="p-5">
    <h2 class="text-xl font-semibold text-gray-800">卡片标题</h2>
    <p class="mt-2 text-gray-500 text-sm leading-relaxed">这是一段描述文字。</p>
    <button class="mt-4 w-full py-2 bg-blue-600 text-white rounded-lg
                   hover:bg-blue-700 transition-colors">
      了解更多
    </button>
  </div>
</div>