【Vue】Vue3 安装 Tailwind CSS 入门

news2024/12/24 18:23:50

初始化 Vue 3 项目

npm install -g @vue/cli
vue create my-project

安装 Tailwind CSS

进入你的项目目录,然后安装 Tailwind CSS 和其依赖项:

npm install -D tailwindcss postcss autoprefixer

配置 PostCSS

Tailwind CSS 需要通过 PostCSS 进行处理。你需要创建一个 postcss.config.js 文件,并添加以下配置:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

为什么需要在 Vue 3 项目中安装 Tailwind CSS 时配置 postcss.config.js

当你在项目中安装 Tailwind CSS 时,实际上是在安装一个包含多个 PostCSS 插件的集合。为了让这些插件能够正确工作,你需要告诉 PostCSS 如何找到和使用这些插件。postcss.config.js 文件就是用来配置这些信息的地方。

在 postcss.config.js 中,你指定了哪些插件应该被 PostCSS 使用,以及它们的顺序,比如你上面的两个配置。

tailwindcss 是 Tailwind CSS 的 PostCSS 插件,它负责解析 Tailwind 指令;

autoprefixer 是另一个常用的插件,它自动添加必要的浏览器前缀,以确保 CSS 在不同浏览器中的兼容性。

因此,当你在 Vue 3 项目中安装 Tailwind CSS 并配置 postcss.config.js 时,你实际上是在设置一个 CSS 处理流程,该流程利用 PostCSS 和相关插件来转换和优化你的 CSS 代码,使得 Tailwind CSS 能够正常工作,从而提供高效且易于维护的前端样式解决方案。

创建 Tailwind 配置文件

运行以下命令来生成默认的 Tailwind 配置文件:

npx tailwindcss init

TypeScript 配置文件 则使用 “ --ts”,具体其他配置文件请参考官网配置。

这将在项目根目录下创建一个 tailwind.config.js 文件。如果你希望自定义配置,你可以编辑这个文件。

当生成并出现后,需要在导出的对象中content[]数组配置添加所需模版文件的路径,即为将要写到哪类后缀模版文件,就需要写入该文件路径及后缀。

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

引入 Tailwind 到你的项目

你可以直接在 main.ts 中引入 tailwind.css,也可以创建一个 css 文件单独引入

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

在 .vue 文件中使用

在这里插入图片描述
在这里插入图片描述

参考链接

tailwindcss
如何在Vue3项目中安装使用Tailwind CSS 以及通过Tailwind CSS插件实现卡片的3D翻转效果?

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux发行版CentOS 8 利用Docker安装应用

目录 一、什么是Docker? 主要功能: 二、安装Docker 1.安装yum配置工具 2.配置docker的yum源 3.安装 4.测试 5.启动,关闭,开机自启动 三、卸载Docker 1.停止服务 2.卸载 3.删除文件 四、Docker配置镜像源 1.在etc下创建docker…

【大模型时代的PDF解析工具】

去年(2023年)是大模型爆发元年。但是大模型具有两个缺点:缺失私有领域知识和幻觉。缺失私有领域知识是指大模型训练时并没有企业私有数据/知识,所以无法正确回答相关问题。并且在这种情况下,大模型会一本正经地胡说八道…

JavaEE--JavaWeb服务器的安装配置(Tomcat服务器安装配置)

前言: 本文介绍了 Java Web 服务器 Tomcat 的安装配置,并详细说明了如何在 IntelliJ IDEA 中配置服务器,创建 JavaEE 项目,并发布文章。文章首先解释了前端程序如何访问后端程序以及 Web 服务器的概念,然后详细介绍了安装 Tomcat…

VirtualBox虚拟机与主机互传文件的方法

建立共享文件夹 1.点击设置,点击共享文件夹,添加共享文件夹路径,保存 2.启动虚拟机,点击设备,点击安装增强功能,界面会出现一个光碟图标,点击光碟图标 3.打开光碟图标,出现一个目…

Vue3渐变文字(GradientText)

效果如下图:在线预览 APIs GradientText 参数说明类型默认值必传gradient文字渐变色参数string | Gradientundefinedfalsesize文字大小,不指定单位时,默认单位 pxnumber | string14falsetype渐变文字的类型‘primary’ | ‘info’ | ‘succ…

【大模型】FAISS向量数据库记录:从基础搭建到实战操作

文章目录 文章简介Embedding模型BGE-M3 模型亮点 FAISS是什么FAISS实战安装faiss加载Embedding模型创建FAISS数据库搜索FAISS数据删除FAISS数据保存、加载FAISS索引 总结 本人数据分析领域的从业者,拥有专业背景和能力,可以为您的数据采集、数据挖掘和数…

Java语言程序设计基础篇_编程练习题**14.29(游戏:豆机)

第十四章第二十九题 **14.29 (游戏:豆机) 请写一个程序,显示编程练习题 7.21 中介绍的豆机,如图 14-52c 所示 代码展示 package chapter_14;import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layou…

易保全参与起草的两项区块链全国团体标准正式发布

在数字化转型浪潮席卷全球的今天,区块链技术以其去中心化、透明性、不可篡改等独特优势,正逐步成为重塑各行各业信任机制与业务流程的关键力量。 近日,中国通信工业协会正式发布了《区块链服务 基于区块链的去中心化标识符技术要求》与《区块…

什么是反向代理?

这里写目录标题 一、什么是反向代理?二、反向代理的工作原理三、使用反向代理的好处四、反向代理的风险 在网络领域中,代理服务器是一种常见的技术,用于转发客户端和服务器之间的请求和响应。代理服务器又可以分为反向代理和正向代理两种类型…

QT实现图片开关控件-自定义控件

开关按钮大家应该很熟悉,在设置里面经常遇到,切换时候的滑动效果比较帅气。通常说的开关按钮,有两个状态:on、off。大部分的开关按钮控件,基本上有两大类,第一类是纯代码绘制,这种对代码的掌控度…

SD-WAN组网搭建5G备份方案实现方式

SD-WAN(Software-Defined Wide Area Network,软件定义广域网)结合5G作为备份链路是现代企业网络弹性策略的一部分,尤其是在需要高可用性和快速故障切换的场景下。以下是实现SD-WAN组网并集成5G备份方案的一般步骤: 1. …

Spring完整知识点汇总一

Spring简介 额外知识点 在之前的学习中我们在Service业务层创建Dao/Mapper数据访问层(持久层)的对象是通过工具类来获取对应Dao/Mapper数据访问层(持久层)的接口代理对象在此处我们不用工具类来获取对应Dao/Mapper数据访问层&…

WebPack5.0 快速入门

前端工程化WebPack5️⃣ 前置知识: 此文章属于前端——框架进阶篇,需要实现掌握:HTMLCSSJS三件套、Node... 😀推荐分享一波个人Blog文档: JavaScript、前端工程\模块化、邂逅Node.JS的那一夜 什么是WebPack❓ Web…

飞凌全志T527开发板modbus移植使用教程

交叉编译 进入到源码目录,执行 ./configure ac_cv_func_malloc_0_nonnullyes --hostaarch64-none-linux-gnu --enable-static --prefix/home/feng/文档/development/Linux/application/OK527N/libmodbus-3.1.10/install/其中–host为交叉编译器的前缀;…

谈一谈一条SQL的查询、更新语句究竟是如何执行的?

文章目录 理解执行流程衍生知识redo logbinlog 本篇文章是基于《MySQL45讲》来写的个人理解与感悟。 理解 先看下图: 上一篇文章我们讨论了一条SQL查询语句的执行流程,并介绍了执行过程中涉及的处理模块。 回顾一下: 大体来说,…

RK3568笔记三十九:多个LED驱动开发测试(设备树)

若该文为原创文章,转载请注明原文出处。 通过设备树配置一个节点下两个子节点控制两个IO口,一个板载LED,一个外接LED。 一、介绍 通过学习设备树控制GPIO,发现有多种方式 一、直接通过寄存器控制 二、通过设备树,但…

【中项】系统集成项目管理工程师-第一模块:IT技术和管理-1.5数字化转型与元宇宙

前言:系统集成项目管理工程师专业,现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 备注:IT技术和管理-1.4章节涉及敏感,无法发送,故跳过。 软考同样是国家人社部和工信部组织的国家级考试…

工业三防平板适用于各种工业场景

在当今高度工业化的时代,工业三防平板作为一种专为恶劣工业环境设计的设备,正逐渐成为各种工业场景中不可或缺的一部分。 工业三防平板具备出色的防水、防尘和防摔性能,这使得它能够在潮湿、多尘以及容易发生碰撞的环境中稳定运行。无论是在矿…

“富二代”用英语怎么说?真的不是“second rich”!成人英语学习柯桥学外语到蓝天广场

看了沈腾马丽新电影《抓娃娃》,笑得前仰后合。遇上“不靠谱”的爹妈硬是要穷养孩子,就算是“富二代”日子也不好过啊! 想必很多人小时候都幻想过:自己的爸妈其实是大富豪,为了磨练自己才假装没钱的。随着逐渐长大才不得…

【内网Tesla T4_16G为例】GPU安装NVIDIA Driver、CUDA、cuDNN、Python

这篇文章主要记录下在内网(无法连接外网)服务器安装NVIDIA Driver、CUDA、cuDNN、Python的过程,机器配置GPU:1*NVIDIA T4 16G,CPU:8C42G,操作系统:GPU-RHEL7.9-x86-64。 想了解如何内网部署ollama&#xf…