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/ https://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