Vue2+vue-cli使用Tailwind CSS

news2024/10/7 14:28:36

1.执行以下命令安装依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2.cmd执行命令npm i 下载项目所用到的依赖

	npm i

3.在项目根目录下创建一个 postcss.config.js 文件

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

4.在项目根目录下,运行以下命令生成 Tailwind CSS 的默认配置文件

npx tailwindcss init

5.在根目录/assets/style目录下创建tailwindcss.css文件并在main.js引入

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

在入口文件main.js里引入这个文件

import './assets/style/tailwindcss.css'

6.页面中测试是否成功

     <div class="bg-blue-500 text-white p-4 text-red-400">
       This is a sample component using Tailwind CSS!
     </div>

6.启动项目

npm run serve

7.测试是否生效

在这里插入图片描述

8.下载vscode插件 Tailwind CSS IntelliSense

在这里插入图片描述
此时 代码会有提示
在这里插入图片描述

9.查阅官网文档 使用对应样式

官网链接:tailwind

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

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

相关文章

fcpx插件:Kingluma Radiance(发光和光线过渡效果)

Kingluma Radiance是一款为Final Cut Pro X&#xff08;FCPX&#xff09;设计的插件&#xff0c;它提供了丰富的光效和发光效果&#xff0c;可用于增强视频的视觉效果。 Radiance插件为用户提供了多种发光效果和光晕效果&#xff0c;如光晕、镜头光晕、梦幻效果等。它具有直观的…

推荐信模版(英文)计算机专业

推荐信模版&#xff08;英文&#xff09;计算机专业 ✅ 内容已校对 润色 ©️ 文章来源&#xff1a;https://blog.csdn.net/IYXUAN&#xff0c;原创内容&#xff0c;转载请注明&#xff01; 推荐信&#xff08;一&#xff09; January 4, 2023 Dear Admissions Committe…

7.4黄金能否继续上行?今日行情如何发展

近期有哪些消息面影响黄金走势&#xff1f;今日黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周二(7月4日)亚市早盘&#xff0c;美元指数继续承压&#xff0c;目前略低于103关口;现货黄金保持在1923美元/盎司附近。由于悲观的美国数据未能支持美联储的鹰派倾向…

node获取文件夹下所有js文件的模块

创建 index.js const fs require(fs) const path require(path)const folderPath path.join(__dirname, api)console.log(目录路径&#xff1a;, folderPath)let moduleObj {}fs.readdirSync(folderPath).forEach((file) > {const filePath path.join(folderPath, file…

C语言指针基础

目录 前言 本期介绍内容&#xff1a; 一、指针是什么&#xff1f; 二、指针和指针类型 指针类型的意义&#xff1a; 三、野指针 3.1什么是野指针&#xff1f; 3.2野指针的成因 1.指针未初始化 2.指针越界访问 3.指针指向的那块空间已经释放&#xff08;还给操作系统了…

图像处理--边缘检测算子

算子推导过程 1、知识引入&#xff1a; 在一维连续数集上有函数f(x),我们可以通过求导获得该函数在任一点的斜率&#xff0c;根据导数的定义有&#xff1a; 在二维连续数集上有函数f(x,y),我们也可以通过求导获得该函数在x和y分量的偏导数&#xff0c;根据定义有&#xff1a; …

更改VS code Jupyter 插件的默认快捷键

更改vscode 中Jupyter插件的默认快捷键&#xff0c;解放插入空行的系统快捷键 替换Jupyter默认快捷键 更改vscode 中Jupyter插件的默认快捷键&#xff0c;解放插入空行的系统快捷键打开keyboard shortcuts 设置方法一方法二 更换快捷键 end Jupyter 插件很好的在VS code中集成了…

在私家车上安装车载电台合法吗?

答案是合法的&#xff0c;不过需要办理相关手续才行。想在自己的车上安装车载无线电台&#xff0c;需要先考取一个业余无线电操作证&#xff0c;然后再将车载电台拿到当地的无线电管理委员会进行验机&#xff0c;如果符合业余广播电台的机器要求&#xff0c;将颁发《中华人民共…

淘宝数据采集员(如何快速高效地采集淘宝数据)

目录 淘宝数据采集的重要性 淘宝数据采集的意义 淘宝数据采集的应用场景 淘宝数据采集的流程 淘宝数据采集的准备工作 淘宝数据采集的技巧与注意事项 淘宝数据采集的工具推荐 淘宝数据采集的流程 如何快速高效地采集淘宝数据 淘宝数据采集的注意事项 淘宝数据采集的重…

安装qt qmake assistant 错误:could not find a Qt installation of ‘‘

1、执行qmake,提示下图的错误 Command qmake not found, but can be installed with: sudo apt install qtchooser 解决方法&#xff1a; sudo apt install qtchooser 2、执行qmake,提示一下错误 qmake: could not find a Qt installation of 解决步骤&#xff1a; 步骤一&a…

spring源码分析-ApplicationContext----扩展组件event listener

我们知道 spring中的ApplicationContext在beanFactory(提供基础bean处理)基础上增加了扩展组件&#xff0c;例如国际化&#xff0c;资源&#xff0c;发布事件和监听事件&#xff0c;今天主要针对发布和监听事件做一次源码分析&#xff0c;看到底发布和监听是如何实现的&#xf…

Promise的常见面试题

四、相关面试题 1. 多个 .catch var p new Promise((resolve, reject) > {reject(Error(The Fails!)) })p.catch(error > console.log(error.message)) p.catch(error > console.log(error.message))以上代码的输出将会是什么&#xff1f; 打印两次 The Fails! 解析…

纯粹数学作业

1、列举一个真命题、一个假命题、一个不知道真假的命题、一个不是命题的陈述。 真命题&#xff1a;太阳是发光发热的。 同位角相等&#xff0c;两直线平行。 假命题&#xff1a;三角形的三个内角和不是180 不知真假的命题&#xff1a;树叶是黄色的。 不是命题的陈述&#x…

伦敦银实时行情软件日常使用

目前伦敦金市场上很多交易都是通过MT4平台来完成&#xff0c;这个行情软件的优势&#xff0c;除了操作简洁、分析功能全面和交易稳定外&#xff0c;支持不同的手机和电子设备版本也是很重要的一点。但很多用户&#xff0c;特别是对于新手日常在操作的过程中&#xff0c;都会或多…

jdk1.8官网下载

地址&#xff1a; https://www.oracle.com/java/technologies/downloads/#java8 选linux x86位的&#xff1a;

【C语言】从水仙花构建思维

前言 &#x1f388;大家好&#xff0c;我是何小侠&#x1f388; &#x1f343;大家可以叫我 小何或者小侠 &#x1f343; &#x1f490;希望能通过写博客加深自己对于学习内容的理解&#x1f490; &#x1f338;也能帮助更多人理解和学习&#x1f338; 击石乃有火&#xff0c;…

【反图+拓扑排序】ABC245 F

F - Endless Walk (atcoder.jp) 题意&#xff1a; 思路&#xff1a; 首先&#xff0c;我们什么时候需要建反图&#xff1a;在一个有向图中&#xff0c;我们需要找出可以到达指定的结点的结点时&#xff0c;我们可以建立反图 这道题中&#xff0c;我们需要找出所有能够到达环…

剑指offer刷题笔记--Num31-40

1--栈的压入、弹出序列&#xff08;31&#xff09; 直观思路&#xff1a;用两个指针 i 和 j 指向压入和弹出的 vector&#xff0c;终止条件是&#xff1a;所有元素都压入了辅助栈&#xff08;i > len&#xff09;&#xff0c;且辅助栈当前的栈顶元素与弹出的元素 popped[j] …

Maven Snapshot 更新策略配置方法

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 在微服务的项目开发中&#xff0c;特别是更新比较频繁的项目&#xff0c;经常会遇到一些项目依赖的问题&#xff0c;依赖的一个项目经常更新&#xff0c;所以我下拉更新项目时候经常出现代码不一致&a…

Ansys Zemax | 使用软件建立立方体卫星系统(一)

在航空航天工业领域中&#xff0c;立方体卫星&#xff08;CubeSats&#xff09;已然是一种低成本、易制造的航天光学系统的解决方案。通过制造一组更小、更实惠的系统&#xff0c;使得为航天产品开发生产线方法成为可能。 立方体卫星光学系统的制造商们需要一个准确并可靠的方法…