vue2使用tailwindcss

萧寂1732025-01-04 9:17

安装包

js 复制代码

npm install -D tailwindcss

初始化配置文件`tailwindcss.config.js`

js 复制代码

npx tailwindcss init

在 `tailwind.config.js` 文件中添加所有模板文件的路径。

js 复制代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里配置的是src文件夹下面所有的html被匹配到
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}",'./public/index.html'],
  important:true,
  theme: {
    extend: {},
  },
  plugins: [],
}

在`/src/assets`下面新建index.css，内容如下

css 复制代码

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

在`package.json`里面新增如下

js 复制代码

"scripts":{
    "watch":"npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}

在`main.js`引入

js 复制代码

import '@/assets/output.css'

运行

bash 复制代码

// 先运行
npm run watch
// 在运行启动项目的命令
npm run serve

vue2使用tailwindcss

安装包

初始化配置文件tailwindcss.config.js

在 tailwind.config.js 文件中添加所有模板文件的路径。

在/src/assets下面新建index.css，内容如下

在package.json里面新增如下

在main.js引入

运行

初始化配置文件`tailwindcss.config.js`

在 `tailwind.config.js` 文件中添加所有模板文件的路径。

在`/src/assets`下面新建index.css，内容如下

在`package.json`里面新增如下

在`main.js`引入