vue2项目启用tailwindcss - 开启class=“w-[190px] mr-[20px]“ - 修复tailwindcss无效的问题

效果图

步骤

  1. 停止编译"npm run dev"
  2. 安装依赖
    npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  3. 创建文件/src/assets/tailwindcss.css,写入内容:
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  4. main.js中引入
    import "./assets/tailwindcss.css"
  5. 根目录中执行
    npx tailwindcss init -p

    自动生成
    /postcss.config.js和/tailwind.config.js

  6. 启用"w-[190px]"格式,修改tailwind.config.js
    /** @type {import('tailwindcss').Config} */
    module.exports = {mode: "jit",purge: ['./public/**/*.html','./src/**/*.{js,jsx,ts,tsx,vue}',],content: ['./public/**/*.html','./src/**/*.{js,jsx,ts,tsx,vue}',],theme: {extend: {},},plugins: [],
    }

TailwindCSS类名大全

一文掌握 Tailwind CSS 基础 - IslandZzzz - 博客园一文掌握 Tailwind CSS 基础 工欲善其事,必先利其器 先推荐一些好用的工具: TailWind CSS 代码提示功能 vscode 插件:Tailwind CSS IntelliSense Tailwind CSS 速查网站:https://tailwind.muzhifan.top/ icon-default.png?t=O83Ahttps://www.cnblogs.com/ltfxy/p/18315143

  • 1 宽高
  • 2. size 正方形
  • 3. margin、padding、space 间距
  • 4. 边框、弧度
  • 5. 字体 大小 对齐方式 斜体加粗
  • 6. 颜色 透明 渐变
  • 7. 伪类 伪元素
  • 8. flex 与 grid 布局
  • 9. 定位 与 优先级
  • 10. transform 形变
  • 11. transition 过渡效果
  • 12. 动画
  • 13. 样式覆盖 样式拓展
  • 14. 样式复用 @layer @apply

参考

https://www.tailwindcss.cn/docs/installation/using-postcss
https://v2.tailwindcss.com/docs/just-in-time-mode
https://www.cnblogs.com/wqddmg/articles/16460976.html
https://juejin.cn/post/7296692047418048522
https://juejin.cn/post/7388891045819088922

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

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

相关文章

Docker部署Nginx

1. 拉取Nginx镜像 1.1 选择指定版本或latest 在部署Nginx时,选择合适的镜像版本是至关重要的。Docker Hub上提供了Nginx的官方镜像,用户可以根据自己的需求选择使用特定版本的Nginx或者始终使用最新的latest标签。 版本选择的重要性:选择一…

WPF+MVVM案例实战与特效(二十八)- 自定义WPF ComboBox样式:打造个性化下拉菜单

文章目录 1. 引言案例效果3. ComboBox 基础4. 自定义 ComboBox 样式4.1 定义 ComboBox 样式4.2 定义 ComboBoxItem 样式4.3 定义 ToggleButton 样式4.4 定义 Popup 样式5. 示例代码6. 结论1. 引言 在WPF应用程序中,ComboBox控件是一个常用的输入控件,用于从多个选项中选择一…

ctfshow-web入门-反序列化(web271-web278)

目录 1、web271 2、web272 3、web273 4、web274 5、web275 6、web276 7、web277 8、web278 laravel 反序列化漏洞 1、web271 laravel 5.7&#xff08;CVE-2019-9081&#xff09; poc <?php namespace Illuminate\Foundation\Testing{use Illuminate\Auth\Generic…

hive数据查询语法

思维导图 基本查询 基本语法 SELECT [ALL | DISTINCT] 字段名, 字段名, ... FROM 表名 [inner | left outer | right outer | full outer | left semi JOIN 表名 ON 关联条件 ] [WHERE 非聚合条件] [GROUP BY 分组字段名] [HAVING 聚合条件] [ORDER BY 排序字段名 asc | desc…

分段式爬虫和数据采集有什么关系

今天有人问我&#xff1a;分段式爬虫和数据采集有什么关系。 我想了想&#xff0c;我说我认为分段式爬虫其实是数据采集的一种手段或者说一种具体的方法。 咱就说数据采集吧&#xff0c;那就是想办法把各种有用的数据从不同的地方收集过来。这里面就有很多种方式&#xff0c;而…

最新网盘资源搜索系统,电视直播,Alist聚合播放

项目乃是基于 Vue 与 Nuxt.js 技术打造的网盘搜索项目&#xff0c;持续开源并保持维护更新。其旨在让人人皆可拥有属于自己的网盘搜索网站。强烈建议自行部署 更新日志&#xff1a; tv播放 新增Alist源聚合播放 新增批量删除功能 新增博客功能 &#xff08;分支&#xff1…

从零开始使用Intel的AIPC使用xpu加速comfyui

Intel的AIPC使用xpu加速跑comfyui 环境安装python环境搭建驱动及oneAPI安装创建python环境验证环境是否生效 ComfyUI的安装下载、汉化comfyui下载checkpoint 测试使用xpu加速测试使用cpu执行测试 环境安装 python环境搭建 直接下载Anaconda 下载地址 安装好后&#xff0c;通…

关于git使用的图文教程(包括基本使用,处理冲突问题等等)超详细

目录 用户签名,初始化git git提交流程图 提交到本地库 版本穿梭 分支操作 分支合并冲突 团队协作 github的使用 推送代码 克隆 拉取代码 团队协作冲突 团队协作之分支管理 推送分支到分支&#xff1a; 拉去远程库分支到本地库&#xff1a; 本地删除远程分支&am…

Android Studio打包时不显示“Generate Signed APK”提示信息

Android Studio打包时&#xff0c;默认显示“Generate Signed APK”提示信息&#xff0c;如下图所示&#xff1a; 如果在打包时不显示“Generate Signed APK”提示信息&#xff0c;解决办法是&#xff1a; Android Studio菜单栏&#xff0c;“File->Settings->Appearan…

【Go】-gRPC入门

目录 什么是gRPC 从Hello开始的简单使用 proto server端 client端 Proto的语法介绍 定义一个消息类型 指定字段类型 分配标识号 指定字段规则 添加更多消息类型 保留标识符&#xff08;Reserved&#xff09; 从.proto文件生成了什么&#xff1f; 标量数值类型 默…

后端SpringBoot学习项目-用户管理-增删改查

最终代码结构 仓库地址 Entity文件 数据库表设计 entity层实现 文件创建 ● 创建entity文件夹 ● 在entity层创建Java类&#xff0c;名字为User (关键字不可使用) 代码实现 package com.example.drhtspringboot.entity;import com.baomidou.mybatisplus.annotation.IdT…

网络管理之---3种网络模式配置

目标&#xff1a; 了解几个概念&#xff1a; 1.什么是IP&#xff1f;什么是IP地址&#xff1f; 2.什么是桥接、NAT、仅主机模式 3.端口&#xff1f; 4.什么是网络接口命名规则 5.网络管理器 IP&#xff1a;指网络之间互联的协议&#xff0c;是TCP/IP 体系中的网络协议 I…

uniapp解析蓝牙设备响应数据bug

本文章为了解决《uniapp 与蓝牙设备收发指令详细步骤(完整项目版)》中第十步的Array 解析成 number函数bug 1、原代码说明 function array16_to_number(arrayValue) {const newArray arrayValue.filter(item > String(item) ! 00 || String(item) ! 0)const _number16 ne…

【测试框架篇】单元测试框架pytest(3):用例执行参数详解

一、前言 上一篇内容介绍了用例编写的规则以及执行用例&#xff0c;执行用例时我们发现有些print输出内容&#xff0c;结果没有给我们展示&#xff0c;这是因为什么原因呢&#xff1f;接下来我们会针对这些问题进行阐述。 二、参数大全 我们可以在cmd中通过输入 pytest -h 或…

再见 阿里巴巴EasyExcel替代品EasyExcel-Plus即将诞生

最近阿里发布公告通知&#xff0c;停止对EasyExcel 更新和维护&#xff0c;EasyExcel 是一款知名的 Java Excel 工具库&#xff0c;由阿里巴巴开源&#xff0c;作者是玉霄&#xff0c;在 GitHub 上有 30k stars、7.5k forks。 据了解&#xff0c;EasyExcel作者玉霄)去年已经从…

VBA08-if语句

一、单行 If 语句 If x > 10 Then MsgBox "x is greater than 10"二、多行 If...Then...End If 语句 If x > 10 ThenMsgBox "x is greater than 10"y x 5 End If 三、If...Then...Else 语句 If condition Then 当条件为真时执行的代码块stateme…

闯关leetcode——202. Happy Number

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/happy-number/description/ 内容 Write an algorithm to determine if a number n is happy. A happy number is a number defined by the following process: Starting with any positive inte…

Apache Kylin 添加MSSQL等第三方数据源(MySQL 亦可)

Apache Kylin 添加MSSQL等数据源 Kylin 版本要求是3 PS&#xff1a;根据Kylin文档kylin 4.0和kylin 3.1的区别中所示&#xff1a; Kylin 3.1.0 支持 Kafka/Hive/JDBC 作为数据源Kylin 4.0 支持 Hive/CSV 作为数据源 官方文档请参考:Setup JDBC Data Source 第三方文档参考…

工位管理优化:Spring Boot企业级系统

3系统分析 3.1可行性分析 通过对本企业级工位管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本企业级工位管理系统采用SSM框架&#xff0c;JAVA作为开…