首页 前端知识 vue3 vite5,引入tailwindcss不生效的原因

vue3 vite5,引入tailwindcss不生效的原因

2024-07-01 23:07:51 前端知识 前端哥 199 419 我要收藏

背景:

在vue3+vite5项目中,安装官方文档引入tailwindcss发现不生效。

原因:

新版本的vite不需要创建scss样式文件,直接在main.js中导入import "tailwindcss/tailwind.css";就可以了,这个文件已经提供了基础配置。另外,对于vite4及以上版本,vite.config.js不需要对tailwind做任何配置,postcss插件vite内部会自动引入进行运行。

解决:

vue3+vite5,引入tailwindcss的步骤

  1. 安装:npm install -D tailwindcss postcss autoprefixer
  2. 执行:npx tailwindcss init  创建 tailwind.config.js
  3. tailwind.config.js配置如下
/** @type {import('tailwindcss').Config} */
export default {
  //配置tailwind的应用范围
  //在这里我们配置了tailwind应用到index.html文件和src目录下所有.vue和.js文件
  content: ["./index.html", "./src/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

    4. 在项目的根目录下创建postcss.config.js文件,并配置如下

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

    5. 在main.js中导入tailwind的基础样式

...
import "tailwindcss/tailwind.css";
...

   6.验证是否正确引入了tailwindcss

    在App.vue,将img标签的class设置为class='bg-red-900'和class='bg-orange-600'若页面中出现如下红色和橙色背景,则表示tailwindcss引入成功。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13720.html
标签
评论
发布的文章

在echarts中使用geojson地图

2024-07-29 00:07:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!