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

目录

  • 效果预览
  • 快速入门
    • 环境配置
    • 配置 tailwind.config.js 设置文件
    • 添加 Tailwind 的基础样式
    • 引入样式到项目
    • 检查构建工具配置
    • 测试 Tailwind CSS 效果
  • 使用插件
    • tailwind.config.js的最终内容
    • app.vue演示
  • 为什么不需要记忆 Tailwind 的类名？
      • 1. 类名直观
      • 2. 文档全面
      • 3. 工具提示
      • 4. 记忆频率高的类
  • 高效使用 Tailwind 的技巧
    • (1) 安装 Tailwind CSS IntelliSense 插件
      • **优势**
      • **安装方式**
    • (2) 熟悉常用类的逻辑
      • **布局**
      • **间距**
      • **颜色**
      • **字体**
      • **边框**
    • (3) 利用官方文档和工具
      • **官方文档**
      • **Tailwind Play**
    • (4) 创建自定义类
      • **示例**
    • 总结

欢迎关注 『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 CSScreateApp(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><inputid="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><inputid="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"><iframesrc="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』 专栏，持续更新中
『未完待续』

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/76228.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

StdioIterator

StdioIterator

参考这种用法&#xff1a; int a[3]{1,2,3}; copy(a,a3,ostream_iterator<int>(cout," ")); 以及 ostream_iterator 类 | Microsoft Learn 中的函数签名&#xff0c;可以编写出 StdioIterator&#xff0c;同样支持 copy 函数的调用。 #include <stdio.h&…
阅读更多...
制作service列表并打印出来

制作service列表并打印出来

制作service列表并打印出来 在Linux中&#xff0c;服务&#xff08;Service&#xff09;是指常驻在内存中的进程&#xff0c;这些进程通常监听某个端口&#xff0c;等待其他程序的请求。服务也被称为守护进程&#xff08;Daemon&#xff09;&#xff0c;它们提供了系统所需的各…
阅读更多...
CKS认证 | Day3 K8s容器运行环境安全加固

CKS认证 | Day3 K8s容器运行环境安全加固

一、最小特权原则&#xff08;POLP&#xff09; 1&#xff09;最小特权原则 (Principle of least privilege&#xff0c;POLP) &#xff1a; 是一种信息安全概念&#xff0c;即为用户提供执行其工作职责所需的最 小权限等级或许可。 最小特权原则被广泛认为是网络安全的最佳实…
阅读更多...
Linux wifi 驱动移植适配流程详解

Linux wifi 驱动移植适配流程详解

基础内容概要 将tplink wn725n 无线网卡驱动移植到ubuntu将tplink wn725n 无线网卡驱动移植到Linux开发板&#xff08;交叉编译&#xff09;将tplink wn725n 无线网卡驱动移植到Linux开发板&#xff0c;在开发板中编译 为什么还要包涵交叉编译&#xff1f; 目标设备是ARM架构…
阅读更多...
Day14 动态规划(3)

Day14 动态规划(3)

一.746. 使用最小花费爬楼梯 FS记忆化搜索优化: const int N 1010;class Solution { public:int mem[N];int dfs(vector<int>& cost, int x){if(mem[x]) return mem[x];int sum 0;if(x 0 || x 1) return 0;else{sum min(dfs(cost, x - 1) cost[x - 1], dfs(c…
阅读更多...
解锁AI潜能：模型上下文协议（MCP）的革新与应用

解锁AI潜能：模型上下文协议（MCP）的革新与应用

解锁AI潜能：模型上下文协议（MCP）的革新与应用 在人工智能发展的当下，大语言模型（LLM）正逐步渗透到各个领域。从智能客服快速响应客户咨询，到智能编程助手协助开发者高效编写代码，LLM展现出强大的能力。然而，随着应用的深入会面临一个问题：模型与数据之间的连接困境。…
阅读更多...
windows与ubuntu双硬盘双系统安装及启动（全流程成功）

windows与ubuntu双硬盘双系统安装及启动（全流程成功）

&#x1f451;主页&#xff1a;吾名招财 &#x1f453;简介&#xff1a;工科学硕&#xff0c;研究方向机器视觉&#xff0c;爱好较广泛… ​&#x1f4ab;签名&#xff1a;面朝大海&#xff0c;春暖花开&#xff01; windows与ubuntu双硬盘双系统安装及启动&#xff08;全流程成…
阅读更多...
【学习笔记】计算机网络（六）

【学习笔记】计算机网络（六）

第6章应用层 文章目录 第6章应用层6.1 域名系统DNS6.1.1 域名系统概述6.1.2 互联网的域名结构6.1.3 域名服务器域名服务器的分区管理DNS 域名服务器的层次结构域名服务器的可靠性域名解析过程-两种查询方式DNS 高速缓存机制 6.2 文件传送协议6.2.1 FTP 概述6.2.2 FTP 的基本工作…
阅读更多...
Python扩展知识详解：lambda函数

Python扩展知识详解：lambda函数

目录 前言 1 基本知识点 语法 特点 代码示例 2 常见使用场景 1. 与高阶函数配合使用 2. 作为排序键来使用 3. 立即调用函数 4. 在字典中使用 3 高级用法&#xff08;进阶版&#xff09; 1. 多参数lambda 2. 设置默认参数 3. 嵌套lambda 注意事项 何时…
阅读更多...
Android： Fragment 的使用指南

Android： Fragment 的使用指南

Android 中 Fragment 的使用指南 Fragment 是 Android 应用开发中的重要组件&#xff0c;它代表 Activity 中的一部分 UI 或行为&#xff0c;可以组合多个 Fragment 在一个 Activity 中构建多窗格 UI&#xff0c;并在不同 Activity 中重复使用某个 Fragment。 基本概念 Frag…
阅读更多...
Vue React

Vue React

Vue 的源码主要分为以下几个部分&#xff1a; 主要涉及 响应式、虚拟 DOM、组件系统、编译器、运行时。 ├── packages/ │ ├── compiler-core/ # 编译器核心 │ ├── compiler-sfc/ # 处理 .vue 单文件组件 │ ├── compiler-dom/ # 处理 DOM 相关…
阅读更多...
项目实战--权限列表

项目实战--权限列表

后端数据&#xff1a; 用表格实现权限列表 const dataSource [{key: 1,name: 胡彦斌,age: 32,address: 西湖区湖底公园1号,},{key: 2,name: 胡彦祖,age: 42,address: 西湖区湖底公园1号,}, ];const columns [{title: 姓名,dataIndex: name,key: name,},{title: 年龄,dataInd…
阅读更多...
私有知识库 Coco AI 实战（一）：Linux 平台部署

私有知识库 Coco AI 实战（一）：Linux 平台部署

Coco AI 是一个完全开源、跨平台的统一搜索和生产力工具&#xff0c;能够连接各种数据源&#xff0c;包括应用程序、文件、Google Drive、Notion、Yuque、Hugo 等&#xff0c;帮助用户快速智能地访问他们的信息。通过集成 DeepSeek 等大型模型&#xff0c;Coco AI 实现了智能个…
阅读更多...
【大模型】微调一个大模型需要多少 GPU 显存？

【大模型】微调一个大模型需要多少 GPU 显存？

视频链接&#xff1a;微调一个模型需要多少GPU显存&#xff1f; up 主页&#xff1a;AI老兵tags&#xff1a; #GPU显存 #模型微调 #LoRA #QLoRA #参数计算 本集视频详细介绍了在模型微调过程中 GPU显存需求的计算方法&#xff0c;包括全量微调和高效微调&#xff08;如 LoRA&am…
阅读更多...
Lambda 表达式是什么以及如何使用

Lambda 表达式是什么以及如何使用

目录 &#x1f4cc; Kotlin 的 Lambda 表达式详解 &#x1f3af; 什么是 Lambda 表达式&#xff1f; &#x1f525; 1. Lambda 表达式的基本语法 ✅ 示例 1&#xff1a;Lambda 基本写法 ✅ 示例 2&#xff1a;使用 it 关键字&#xff08;单参数简化&#xff09; ✅ 示例 3…
阅读更多...
全文 MLIR TOY -- Chapter2: 发出基本的 MLIR——把AST变成SSA的 MLIR Dialect IR

全文 MLIR TOY -- Chapter2: 发出基本的 MLIR——把AST变成SSA的 MLIR Dialect IR

现在我们已经熟悉 Toy 语言和它的AST表示&#xff0c;现在让我们看看 MLIR 是怎样帮助编译 Toy 源程序的。 简介&#xff1a;多层中间表示 其他的编译器&#xff0c;像 LLVM&#xff0c;是提供一个固定的预定义类型和指令&#xff08;通常是底层的像 RISC的指令&#xff09;。对…
阅读更多...
一个判断A股交易状态的python脚本

一个判断A股交易状态的python脚本

最近在做股票数据相关的项目&#xff0c;需要用到判断某一天某个时刻A股的状态&#xff0c;比如休市&#xff0c;收盘&#xff0c;交易中等&#xff0c;发动脑筋想了一下&#xff0c;这个其实还是比较简单的&#xff0c;这里我把实现方法分享给大家。 思路 当天是否休市 对于某…
阅读更多...
LLaMA Factory微调后的大模型在vLLM框架中对齐对话模版

LLaMA Factory微调后的大模型在vLLM框架中对齐对话模版

LLaMA Factory微调后的大模型Chat对话效果&#xff0c;与该模型使用vLLM推理架构中的对话效果&#xff0c;可能会出现不一致的情况。 下图是LLaMA Factory中的Chat的对话 下图是vLLM中的对话效果。 模型回答不稳定&#xff1a;有一半是对的&#xff0c;有一半是无关的。 1、未…
阅读更多...
004 健身房个性化训练计划——金丹期（体态改善）

004 健身房个性化训练计划——金丹期（体态改善）

个人笔记使用。 01 肱骨前移 1.放松肩前束 2.放松肩后束 2.5kg哑铃侧展 泡沫轴上下滚 招财猫 肱二头 02 溜肩 宽距的坐姿划船 上顶
阅读更多...
【已开源】UniApp+vue3跨端应用从0到1开发指南、uniapp+vue3模板应用

【已开源】UniApp+vue3跨端应用从0到1开发指南、uniapp+vue3模板应用

在跨端开发日益成为主流的今天&#xff0c;如何高效构建规范、可维护的企业级应用&#xff1f;本文以UniAppVue3* *TypeScript**为核心技术栈&#xff0c;手把手带你从零搭建高标准的跨平台项目。 通过本文&#xff0c;你将系统掌握&#xff1a; ✅ 环境配置&#xff1a;Node…
阅读更多...
最新文章

Copyright @ 2022~2023