JAVA、PHP、前端、APP、网站开发 - 开发技术学习

开发技术学习 » 前端设计 » vue引入tailwindcss,vue2 tailwindcss不生效解决方法

vue引入tailwindcss,vue2 tailwindcss不生效解决方法

此文被围观156日期: 2024-03-26 分类 : 前端设计  标签:  ····

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

2、npx tailwindcss init -p

生成

tailwind.config.js

postcss.config.js


3、main.js中添加

import "tailwindcss/tailwind.css"

4、如果不生效,查找build/utils.js(不存在此文件看后面)中在

postcssLoader中的options添加:
plugins: [
  require('tailwindcss'), require('autoprefixer')
]

还不行就在vue.config.js中添加:
// vue.config.js
module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          plugins: [require('tailwindcss'), require('autoprefixer')]
        }
      }
    }
  }
  
 
 
 vue引入tailwindcss,vue2 tailwindcss不生效解决方法
 
 
 在此链接上修改的:
 https://blog.csdn.net/qq_40230735/article/details/123684730

站点声明:部分内容源自互联网,为传播信息之用,如有侵权,请联系我们删除。

© Copyright 2011-2024 www.kfju.com. All Rights Reserved.
超级字帖 版权所有。蜀ICP备12031064号