在项目中成功的引入tailwindcss

277 阅读1分钟

首先当我们创建好项目后执行

>npm install -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.2

当我们下载好插件之后执行以下命令

npx tailwindcss init -p

项目会自动创建出tailwind.config.js以及post.config.js

我们再进行sass的下载

npm install -D sass@1.45.0

如果是下载最新版则不需要加版本号 在tailwind.config.css中进行如下配置

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

在scr下新建styles文件,创建index.scss,加入如下代码,最后在main.js中引入即可

@tailwind base;
@tailwind components;
@tailwind utilities;