『VUE』快速入门配置环境使用tailwind css 记忆tailwind css常见规则 （详细图文注释）

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

效果预览

快速入门

官方文档为准https://tailwind.nodejs.cn/docs/installation

环境配置

新建vue项目
vue create vue-study-tailwind
cd目录
cd vue-study-tailwind
安装
npm install -D tailwindcss postcss autoprefixer
初始化 Tailwind CSS 配置文件
npx tailwindcss init

配置 tailwind.config.js 设置文件

在 tailwind.config.js 文件中，配置 Tailwind CSS 的内容路径，以确保只生成实际使用的样式。

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加 Tailwind 的基础样式

• 将 Tailwind CSS 的基础样式添加到项目的主 CSS 文件中（通常是 src/assets/main.css 或 src/style.css）。如果项目中没有 CSS 文件，可以新建一个。
• 这里以main.css为例子

main.css的内容

/* src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

引入样式到项目

确保在项目入口文件中引入 main.css 文件。例如，在 src/main.js 中：

加入这一行import './assets/main.css' // 引入 Tailwind CSS后可能是下面这样

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css' // 引入 Tailwind CSS

createApp(App).mount('#app')

检查构建工具配置

不同的工具可能需要额外的配置。

对于 Vite：
Vite 默认支持 PostCSS，无需额外配置。只需确保 vite.config.js 文件中没有错误的 CSS 配置。

对于 Vue CLI：
需要在 vue.config.js 的css中配置 PostCSS：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
          ],
        },
      },
    },
  },
})

测试 Tailwind CSS 效果

在任意组件中使用 Tailwind 的类名.把App.vue改为

<template>
  <div class="p-4 bg-blue-500 text-white text-center">
    <h1 class="text-3xl font-bold">Hello, Tailwind CSS + Vue!</h1>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
</style>

使用插件

你可以通过插件扩展 Tailwind CSS 的功能，以下是一些推荐的插件：

• Forms 插件（优化表单样式）：

npm install -D @tailwindcss/forms

在 tailwind.config.js 中添加插件：

plugins: [
  require('@tailwindcss/forms'),
],

• Typography 插件（优化文章样式）：

npm install -D @tailwindcss/typography

在 tailwind.config.js 中添加插件：

plugins: [
  require('@tailwindcss/typography'),
],

• Aspect Ratio 插件（设置固定比例的容器）：

npm install -D @tailwindcss/aspect-ratio

在 tailwind.config.js 中添加插件：

plugins: [
  require('@tailwindcss/aspect-ratio'),
],

tailwind.config.js的最终内容

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio')
  ],
}

app.vue演示

<template>
  <div class="p-6 bg-gray-100 min-h-screen space-y-8">
    <!-- 使用 Forms 插件 -->
    <div class="bg-white shadow p-4 rounded">
      <h2 >Tailwind CSS Forms 插件示例 没有任何文本内容</h2>
      <h2 class="text-xl font-semibold mb-4">Tailwind CSS Forms 插件示例</h2>
      <form>
        <div class="mb-4">
          <label for="name" class="block text-sm font-medium text-gray-700">名字</label>
          <input
              id="name"
              type="text"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
              placeholder="请输入您的名字"
          />
        </div>
        <div class="mb-4">
          <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
          <input
              id="email"
              type="email"
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
              placeholder="请输入您的邮箱"
          />
        </div>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          提交
        </button>
      </form>
    </div>

    <!-- 使用 Typography 插件 -->
    <div class="prose max-w-none bg-white shadow p-4 rounded">
      <h2>Tailwind CSS Typography 插件示例</h2>
      <p>
        这是一个使用 <strong>Typography</strong> 插件的段落。它会自动优化文字样式，适用于文章内容。
      </p>
      <blockquote>
        这是一段引用，Typography 插件会为它自动应用更优美的样式。
      </blockquote>
      <ul>
        <li>这是列表项 1</li>
        <li>这是列表项 2</li>
        <li>这是列表项 3</li>
      </ul>
    </div>

    <!-- 使用 Aspect Ratio 插件 -->
    <div class="bg-white shadow p-4 rounded">
      <h2 class="text-xl font-semibold mb-4">Tailwind CSS Aspect Ratio 插件示例</h2>
      <div class="aspect-w-16 aspect-h-9">
        <iframe
            src="https://www.youtube.com/embed/dQw4w9WgXcQ"
            title="YouTube 视频"
            frameborder="0"
            class="w-full h-full"
            allowfullscreen
        ></iframe>
      </div>
      <p class="text-gray-500 mt-2 text-sm">以上是一个 16:9 比例的视频嵌入框。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
/* 这里留空，因为我们完全依赖 Tailwind CSS 的类名 */
</style>

为什么不需要记忆 Tailwind 的类名？

1. 类名直观

Tailwind 的类名与 CSS 属性密切相关，几乎可以直接猜出来。

• p-4 对应 padding: 1rem;
• text-center 对应 text-align: center;
• bg-blue-500 是背景色为蓝色，颜色强度为 500。

2. 文档全面

Tailwind 提供了详细的 官方文档，可以随时查询类名和用法。

3. 工具提示

IDE 插件（如 VS Code 的 Tailwind CSS IntelliSense）会自动提示和补全类名。

4. 记忆频率高的类

常用的类会随着使用频率被你自然记住，比如 flex、grid、text-white 等。

高效使用 Tailwind 的技巧

(1) 安装 Tailwind CSS IntelliSense 插件

优势

• 自动补全类名。
• 提供类名的实时预览。
• 检查拼写错误。

安装方式

1. 打开 VS Code。
2. 搜索插件 Tailwind CSS IntelliSense 并安装。
3. 重启 VS Code。

效果：输入类名时，插件会根据上下文提示可用的 Tailwind 类，并显示样式预览。

(2) 熟悉常用类的逻辑

布局

• flex / grid: 布局方式。
• justify-center: 水平居中。
• items-center: 垂直居中。

间距

• p-{size}: 内边距（padding）。
• m-{size}: 外边距（margin）。
  • 例：p-4 表示内边距为 1rem，m-2 表示外边距为 0.5rem。

颜色

• text-{color}-{intensity}: 文本颜色。
• bg-{color}-{intensity}: 背景颜色。
  • 例：text-red-500 表示红色文本，bg-blue-200 表示浅蓝色背景。

字体

• text-{size}: 字体大小。
• font-{weight}: 字体粗细。
  • 例：text-lg 表示大号字体，font-bold 表示粗体。

边框

• border: 添加边框。
• border-{color}: 设置边框颜色。
  • 例：border-2 表示 2px 宽边框，border-gray-500 表示灰色边框。

(3) 利用官方文档和工具

官方文档

• 提供了完整的类名列表和用法示例。
• 文档搜索功能强大，可以快速找到想用的样式。

Tailwind Play

• 官方提供的在线沙盒工具 Tailwind Play。
• 无需配置环境即可测试 Tailwind 样式。

(4) 创建自定义类

对于复杂的重复样式，可以创建自定义类，而不必使用大量的原子类：

示例

在main.css中

/* 自定义组合类 */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』